params、query是什么?
params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。
1 调用this.$router.push实现携带参数的跳转
this.$router.push({
path:`/About/${id}`
})
// 或者使用路由的name
this.$router.push({
name: "About",
params: {id: id}
})
//注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!
// 你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应 '/about/:id'。使用query方法,就没有这种限制,直接在跳转里面用就可以
// 注意:如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的http请求或者其他操作就会失败。
// 在路由中配置
{
path: '/about/:id',
name: 'About',
component: About
}
// 接收参数
this.$route.params
2 通过query传递参数
this.$router.push({
name: "About",
query: {id: id}
})
// 路由配置
{
path: '/about',
name: 'About',
component: About
}
// 接收参数
this.$route.query
3 router-link传递参数
// 通过query传递
<router-link tag="div" :to="{path:'/playList',query:{id:item.id}}"></router-link>
//通过router-link在路由上加上query,然后通过query,获取数据
let id = this.$route.query.id;
//注意:如果router-link的to属性指向本页面,需要在watch中监听路由的变化$route,然后调用函数请求数据,不然页面数据不会主动刷新
props
我们在定义路由规则的时候,可以传递props属性,属性值有两种情况
第一种:属性值是true
会将动态路由数据传递给组件
第二种:属性值是函数
参数是$route数据对象
返回值表示给组件传递的数据
我们在组件中,通过props属性去接收这些数据(类似父组件向子组件通信)
{
name: 'list',
path: '/list/:page',
component: List,
// 会将动态路由数据传递给组件,只能传递动态数据
// props: true
// 传递更多的数据
props(route) {
return {
page: route.params.page,
path: route.path,
hash: route.hash,
color: route.query.color
}
}
},
// 我们在组件中,通过props属性去接收这些数据(类似父组件向子组件通信)
props: ['page', 'path', 'hash', 'color'],