Vue2.0 Vue路由路由的params配置项

想当年ajax里面的query参数也是有params和query参数

给localhost:5000传递参数

• 用query传递过去的参数是

localhost:5000?name=tom

• 如果你想携带params参数

localhost:5000/tom

所以你可以这么写:

<router-link :to="`/home/message/detil/666/你好`">{{m.name}}</router-link>

但是不知道的人还以为

home:一级路由
message:二级路由
detil:三级路由
666:四级路由
你好:五级路由

但是前三个才是路由的层级

后面俩个其实是参数

但我们自己明白没用要告诉路由器,如果以这种方式只能去麻烦路由

router > index.js

{
    path:'/home',
    component:Home,
    children:[
 		{
            path:'news',
            component:News,
        },
        {
            path:'message',
            component:Messgae,
            children:[
                {
                    name: 'xiangqing',
                    path:"detil/:id/:name",
                    component: Detil,
                }
            ]
        }
    ]
},

这时已经不在query里面了而在params里面了:

{name: 'xiangqing', meta: {…}, path: '/home/message/detil/4g-HUxEE_3wqSEiBvEsLF/消息1', hash: '', query: {…}, …}
    fullPath: "/home/message/detil/4g-HUxEE_3wqSEiBvEsLF/消息1"
    hash: ""
    matched: (3) [{…}, {…}, {…}]
    meta:
    [[Prototype]]: Object
    name: "xiangqing"
    params: {id: '4g-HUxEE_3wqSEiBvEsLF', name: '消息1'}
    path: "/home/message/detil/4g-HUxEE_3wqSEiBvEsLF/消息1"
    query: {}
    [[Prototype]]: Object

只要在Detil.vue里面换成这样就可以了:

<li>消息编号:{{$route.params.id}}</li>
<li>消息的名字:{{$route.params.name}}</li>

Message.vue(字符串形式)

<router-link :to="`/home/message/detil/${m.id}/${m.name}`">{{m.name}}</router-link>

这么改就可以了

Message.vue(对象写法)

<router-link :to="{
    path: '/home/message/detil/',//这里路径不允许写params
    params:{
        id: m.id,
        name: m.name
    }
}">
    {{m.name}}
</router-link>

这样配置底层就变成了

/home/message/detil/m.id/m.name

理论上应该是，但实际上不可行。你就老老实实的写name

总结

配置路由的params参数

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

{
    path:'/home',
    component:Home,
    children:[
 		{
            path:'news',
            component:News,
        },
        {
            path:'message',
            component:Messgae,
            children:[
                {
                    name: 'xiangqing',
                    path:"detil/:id/:name",//使用占位符声明params参数
                    component: Detil,
                }
            ]
        }
    ]
}

你得占位，如果你不声明，它是得不到参数的

2.传递参数

<!--跳转并携带params参数,to的字符串写法-->
<router-link :to="`/home/message/detil/${m.id}/${m.name}`">{{m.name}}</router-link>

<!--跳转并携带params参数,to的对象写法-->
<router-link :to="{
    path: '/home/message/detil/',//这里路径不允许写params
    params:{
        id: m.id,
        name: m.name
    }
}">
    {{m.name}}
</router-link>

特别注意:路由携带params参数是,若使用to的对象写法,则不能使用path配置项,必须使用name配置!