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>