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
                }
            ]
        }
    ]
   }
  1. 传递参数
   <!-- 跳转并携带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配置!

  1. 接收参数:
   $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

转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>