1、query
一、query参数
<router-link to='/home/message?id=555&message="hhhh"'>
重要:如何在路由中携带js的变量。
<!--路由跳转携带query参数,to的字符串写法-->
<router-link :to='`/home/message?id=${m.id}&mes=${m.name}`'>
1、给to加v-bind,简写是冒号 :
2、给路由加模板字符串
3、给要传递的数据用 &{} 包裹
<!--路由跳转携带query参数,to的对象写法-->
<router-link :to="{
path:'/home/message',
query:{
id:m.id,
title:m.name
}
}"> </router-link>如何获取query参数:
在路由对应的组件中:
在mounted(){
//查看route中的数据
console.log(this.$route)}
2、params 未整理
1、在路由配置中进行配置:index.js,要先声明进行占位
routes:[
{
name:'home',
path:'/home',
component:Home,
children:[
name:'message',
path:'message/:id/:name', //在配置路由规则中,声明携带的参数,占位符
component:Message,
]
}
]
2、使用,在路由跳转中携带数据
模板字符串携带:
<router-link :to='`home/message/${data.id}/${data.name}/`'> </router-link>
对象方式携带:
<router-link :to="{
name:'message', //这里必须是路由的别名,路由配置中的name属性是对应的数据
params:{
id:data.id,
name:data.name
}
}"> </router-link>
3、在组件中如何获取到随路由携带的数据?
在$route.params中就可以拿到数据