Vue 2.x – 命名路由/params传参

5.命名路由

1. 作用：可以简化路由的跳转。

2. 如何使用

   1. 给路由命名：

      {
      path:'/demo',
      component:Demo,
      children:[
          {
              path:'test',
              component:Test,
              children:[
                  {
                          name:'hello' //给路由命名
                      path:'welcome',
                      component:Hello,
                  }
              ]
          }
      ]
      }

   2. 简化跳转：

      <!--简化前，需要写完整的路径 -->
      <router-link to="/demo/test/welcome">跳转</router-link>
      
      <!--简化后，直接通过名字跳转 -->
      <router-link :to="{name:'hello'}">跳转</router-link>
      
      <!--简化写法配合传递参数 -->
      <router-link 
      :to="{
          name:'hello',
          query:{
             id:666,
                title:'你好'
          }
      }"
      >跳转</router-link>

6.路由的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

代码

https://github.com/icrons/Vue-Learn/tree/master/33_src_%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1

https://github.com/icrons/Vue-Learn/tree/master/34_src_%E8%B7%AF%E7%94%B1params%E4%BC%A0%E5%8F%82