五、路由的params参数

1、第一种字符串写法（源码）

1、Message.vue

    {{m.title}}

1
2
3
4

2、router/index.js

// ...
{ // 二级路由
    path: 'message',
    component: Message,
    children: [{
         name: 'detail',
         path: 'details/:id/:title/:desc', // 配置占位符
         component: Details,
    }]
}
// ...
1
2
3
4
5
6
7
8
9
10
11

3、Details.vue

1
2
3
4
5
6
7

4、Result

---

2、第二种对象写法（源码）

1、Message.vue

    {{m.title}}

1
2
3
4
5
6

router/index.js 和 Details.vue 沿用上面第一种时的更改即可

2、注意点！用 params 必须用 name！

---

3、总结

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

   {
      path:'/home',
      component:Home,
      children:[
         {
            path:'news',
            component:News
         },
         {
            component:Message,
            children:[
               {
                  name:'xiangqing',
                  path:'detail/:id/:title', //使用占位符声明接收params参数
                  component:Detail
               }
            ]
         }
      ]
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

2. 传递参数

   
   跳转
               
   
   跳转
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

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

3. 接收参数：

   $route.params.id
   $route.params.title
   1
   2