一、书写习惯
（1）在components下新建组件header ，跳转的router都放在这里
因为要保持App.vue不臃肿
<div class="header">
<router-link to="/home">首页</router-link>
<router-link to="/type">分类</router-link>
</div>
<router-view></router-view>
（2）并在app全局组件中引入这个组件，注册，使用
<template>
<div id="app">
03.使用组件
<Header></Header>
<router-view></router-view>
</div>
</template>
<script>
01.导入组件
import Header from './components/Header.vue'
export default {
name: 'App',
02.注册组件
components:{
Header
}
}
</script>
二、路由中的重定向
（1）路由重定向redirect
routes:[
{
path:'',
重定向，如果path地址为空，会默认跳转到home页面
redirect:'/home'
},
{
path:'/index',
重定向，如果path地址为/index，为默认跳转到home页面
redirect:'/home'
},]
（2）/表示是根路径，router-view在哪根路径就是哪，这里把根路径放在在app.vue中
export default new VueRouter({
routes:[
{
path:'/',
name:'home',
component:Home
}
]
})
（3）路径设置为*，表示跳转未配置的路由地址，都会默认跳转404页面
{
path:'*',
name:'error404',
component:Error404
}
（4）点击图片返回首页
实现过程，给img绑定点击事件，通过替换当前路由对象地址完成跳转操作
<template>
<div class="error404">
<img src="../assets/img/404.jpg" @click="gotoHome">
</div>
</template>
<script>
export default {
name: "Error404",
methods: {
gotoHome(){
//回到首页
//replace()方法跳转，不保留历史记录,用户无法点击返回
this.$router.replace('/home')
}
},
};
</script>
<style scoped>
图片居中覆盖底层内容
.error404{
background-color: white;
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
}
.error404 img{
height: 100%;
}
</style>
http://localhost:8080/#/type/1001
去除提示
"eslintConfig"
"rules": {
"no-unused-vars":"off"
}
三、路由传参的方式
路由传参的方式有两种：
1.通过开启props参数，并在组件内部接收props:[]，并监听接收到的参数进行赋值调用实现页面数据切换
2.通过?id='1001'传参，this.$route的query接收参数
（1）/:id传参，$route的params接收
①配置路由页面配置路径/:id传递参数
②$route返回当前路由信息，它里面的params保存的是路由参数
③查找当前lists列表ID等于传递过来路径的参数的那一项,并赋给定义的空对象
④这个方法不能连续点击跳转页面，如果需要连续跳转要结合开启props
//Header.vue
<router-link to="/type/1001">南京</router-link>
<router-link to="/type/1002">镇江</router-link>
<router-link to="/type/1003">无锡</router-link>
<router-link to="/type/1004">苏州</router-link>
//Type.vue
<h2>{{city.city}}</h2>
<h2>{{city.content}}</h2>
//router的index.js
{
//只有输入type/x，才正常出现，只输入type会报错
path:'/type/:id',
name:'type',
component:Type
},
//Type.vue
created(){
console.log(this.$route);
let {params:{id}}=this.$route
this.city= this.lists.find(r=>r.id==id)
}, //这个id是通过点击后params里传过来的，不能连续跳转
通过props组件的属性
①开启组件属性接收参数（路由参数通过组件的props属性来接收）
②设置组件props接收传递的参数/:id，所有是props接收id参数
③开启监听器以对象形式，一开始执行一遍（对象的话可以可通过开启deep:true，来开启深度监听）。通过监听id获取到的数据，再写方法遍历数组中id相等的那一项赋值给创建的空对象city，最后在监听器中调用方法，只要数据发生变化就会调用一次方法
//Header.vue
<router-link to="/type/1001">南京</router-link>
<router-link to="/type/1002">镇江</router-link>
<router-link to="/type/1003">无锡</router-link>
<router-link to="/type/1004">苏州</router-link>
//Type.vue
<h2>{{city.city}}</h2>
<h2>{{city.content}}</h2>
//router的index.js
{
path:'/type/:id',
props:true,
name:'type',
component:Type,
},
//Type.vue
props:['id'],
methods: {
getData(){
this.city=this.lists.find(r=>r.id==this.id)
} 这个this.id是通过监听属性得来的数据，好处每次变动可以连续跳转
},
watch:{
//开启监听
id:{ //监听对象的形式，开启深度监听
//一开始执行一次
immediate:true,
//房产返回两个值，现在的和过去的，由于对象赋值是改变地址，所有过去的值为 undefined
handler(){
this.getData()
}
}
}
（2）通过?id=xx传参，获取是在this.$route里的query。
深度侦听当前路由信息
①不需要修改路由，侦听当前路由变化，结构出当前路由query传递参数，遍历出与当前id相等的一项赋值给空对象
<router-link to="/news?id=1001">广州市大规模迁移砍伐城市树木，市委副书记等10人被问责</router-link>
<router-link to="/news?id=1002">提前结课离校!北大等部分在京高校调整期末考试及寒假安排</router-link>
watch: {
$route: {
immediate: true,
handler() {
let { query: { id }} = this.$route;
this.news = this.lists.find((r) => r.id == id);
},
},
},
②多个参数
<router-link to="/news?id=1001&name=123&age=19">提前结课离校！</router-link>
模板字符串多内容的显示
（1）通过获取标签，设置标签的html内容，此方法必须是在监听id，并执行id同时使用。
此方法虽可跳转但控制台会报错
<h2 id="content"></h2>
lists:[
{
id:1001,
city:'南京',
content:` <ul>
<li>南京的盐水鸭真好吃</li>
<li>南京的夫子庙真好玩</li>
</ul>`
}]
mounted() {
// 通过获取标签修改hrml的值为当前城市的内容
document.querySelector('#content').innerHTML=this.city.content
},
//开启监听
watch:{
//监听对象的形式，开启深度监听
id:{
//一开始执行一次
immediate:true,
//返回两个值，现在的和过去的，由于对象赋值是改变地址，所有过去的值为undefined
handler(){
this.getData()
document.querySelector('#content').innerHTML=this.city.content
}
}
}
（2）使用ref
页面正常跳转，但此方法控制台同会报错
<h2 ref="content"></h2>
lists:[
{
id:1001,
city:'南京',
content:` <ul>
<li>南京的盐水鸭真好吃</li>
<li>南京的夫子庙真好玩</li>
</ul>`
}]
mounted() {
// 通过获取标签修改hrml的值为当前城市的内容
this.$refs.content.innerHTML=this.city.content
},
//开启监听
watch:{
//监听对象的形式，开启深度监听
id:{
//一开始执行一次
immediate:true,
//返回两个值，现在的和过去的，由于对象赋值是改变地址，所有过去的值为undefined
handler(){
this.getData()
this.$refs.content.innerHTML=this.city.content
}
}
}
（3）推荐方法v-html
①通过v-html指令，可以渲染富文本内容（包含html信息的内容）
② v-text指令，渲染文本内容
<div v-html="city.content"></div>
<h2 id="content"></h2>
lists:[
{
id:1001,
city:'南京',
content:` <ul>
<li>南京的盐水鸭真好吃</li>
<li>南京的夫子庙真好玩</li>
</ul>`
}]
//开启监听
watch:{
//监听对象的形式，开启深度监听
id:{
//一开始执行一次
immediate:true,
//返回两个值，现在的和过去的，由于对象赋值是改变地址，所有过去的值为undefined
handler(){
this.getData()
}
}
}
总结今天的知识点，路由传参的三种方式、路径的配置和v-html渲染副文本内容
