一、书写习惯

（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渲染副文本内容

Vue-cli——路由重定向&传参