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>