vue学习笔记：vue-router

vue-router的使用与路由间通信

vue-router的安装

安装：在npm内安装

// 如果是vue3项目的话直接安装
npm i vue-router
// 如果是vue2项目的话，要用3.版本的vue-router
npm i vue-router@3

路由间通信

路由间数据传输有两种方式query、params
其中query

//直接用query形式的请求传参
<router-link :to="/homeDetail/News?id=1&gi=10"  active-class="active" class="news">新闻</router-link>
<!-- 直接利用query参数传对象要将对象用JSON.stringify转换为字符串才能传过去否则会被错误解析 -->
<router-link :to="`/homeDetail/News?id=1&gi=10`"  active-class="active" class="news">新闻</router-link>
//active-class="active"意思是激活时改变样式

//query传参的对象形式
<router-link to="{
      path:'路径', //最好用单引号，用双引号可能会导致eslint检测到语法错误
      query:{
             id:1,
             gi:10
      }
}">消息</router-link>

//query形式接收参数
列如接收id参数：this.$route.query.id
或者借助props接收，路由组件直接可以借助props属性挂载传过来的参数，和props的
父子传参使用方式没有区别
在路由配置里的index.js里
要接收参数的路由配置
方式一对象式：
prop:{id:1,gi:10}
方式二函数式：
prop($route)
{ 
        return {id:$route.query.id,gi:$route.query.gi}
} 

//params传参
//使用params直接传参首先要在路由配置中使用占位符占住
export default new VueRouter({
    routes:[
          {
            path:'/AboutDetail',
            component:AboutDetail,
          },
          {
            path:'/homeDetail',
            component:homeDetail,
            children:[{
                name:"msg",
                path:'Message/:id/:msg',
                component:Massage,
            }]
           }]
 })
 //而后在router-link直接传参
 <router-link :to="`/homeDetail/Message/${id=1}/${msg=234}`" active-class="active" class="message">消息</router-link>
 //params使用router-link to的对象形式传参
 <router-link :to="{
   name:"message",//这里一定在路由规则里面给要接收参数的路由命名，否则不起作用,例如我这里路由规则里面该路由的名字是message
   params:{
         id:1,
         gi:10
   }  
 }" active-class="active" class="message">消息</router-link>
//params接收参数
this.$route.params.id
//或者借助路由的prop属性，对象式和函数式与query传参没有区别，这里讲params特有的传参方式
prop:true,
//然后在接收端就可以靠props接收参数了