Vue-57、Vue技术路由的参数如何传递

query参数传递

1、传递参数

<!--                跳转路由并携带query参数，to的字符串写法-->
<router-link :to="`/home/message/detail?id=${p.id}&title=${p.title}`">
{{p.title}}
</router-link>

<!--                跳转路由并携带query参数，to的对象写法-->

<router-link :to="{path:'/home/message/detail',query:{id:p.id,title:p.title}}">{{p.title}}
</router-link>

2、接收参数

<li>消息标题：{{$route.query.id}}</li>
<li>消息标号:{{$route.query.title}}</li>

params参数传递

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

routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {

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

2、传递参数

<!--                跳转路由并携带params参数，to的字符串写法-->
<router-link :to="`/home/message/detail/${p.id}/${p.title}`">{{p.title}}</router-link>
<!--                跳转路由并携带params参数，to的对象写法-->
 <router-link :to="{name:'xiangqing',params:{id:p.id,title:p.title}}">{{p.title}}</router-link>

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

3、接收参数：

<li>消息标题：{{$route.params.id}}</li>
<li>消息标号:{{$route.params.title}}</li>