笔记

课程 :
https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=123

视频教程中的笔记

路由的params参数

1. 配置路由，声明接收params参数

   {
       path:'/home',
       component:Home,
       children:[
           {
               path:'news',
               component:News
           },
           {
               component:Message,
               children:[
                   {
                       name:'xiangqing',
                       path:'detail/:id/:title', //使用占位符声明接收params参数
                       component:Detail
                   }
               ]
           }
       ]
   }

2. 传递参数

   <!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>

   <!-- 跳转并携带params参数，to的对象写法 -->
   <router-link 
       :to="{
           name:'xiangqing',
           params:{
              id:666,
               title:'你好'
           }
       }"
   >跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3. 接收参数：

   $route.params.id
   $route.params.title