方式1:通过query传参
参数会跟在url后面
this.$router.push({
path: '/detail',
query: {
id: id
}
})
// 对应路由配置：
{
path: '/detail',
name: 'Detail',
component: Detail
}
// 子组件获取参数:
this.$route.query.id
方式2:通过params方式传参
this.$router.push({
name: 'Detail',
params: {
id: id
}
})
// 对应路由配置：
{
path: '/detail',
name: 'Detail',
component: Detail
}
// 子组件获取参数:
this.$route.params.id
方式3:
// 直接在路由地址后面拼接参数
this.$router.push({
path: `/detail/${id}`,
})
// 路由配置
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//获取参数
this.$route.params.id
补充：
params传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了
// 定义的路由中，只定义一个id参数
{
path: 'detail/:id',
name: 'Detail',
components: Detail
}
// template中的路由传参，
// 传了一个id参数和一个token参数
// id是在路由中已经定义的参数，而token没有定义
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>
// 在详情页接收
created () {
// 以下都可以正常获取到
// 但是页面刷新后，id依然可以获取，而token此时就不存在了
const id = this.$route.params.id;
const token = this.$route.params.token;
}
总结：
1. query传参：
- name和path都行，
- url会带上参数，
- 通过this.$route.query获取
2. params传参：
- 只能name
- url不会带上参数，刷新就没有了
- 通过this.$route.params获取
