There are two ways of routing parameters, params and query, which can control whether to display parameters
1. Params parameter passing
- The page routing address when passing parameters
不显示参数, the parameters will be lost when the page is refreshed,
and the page will be redirected when the button is clicked
// 跳转到的页面路由配置文件
{
path: '/XXX,
name: 'A', // 路由别名
component: XXX
}
/// 点击方法：
this.$router.push({
name: 'A', // 必须传name，不能传path或其他
params: {
id: 'aaa'
}
})
// 接收参数的页面
console.log(this.$route.params.id)
- The page routing address when passing parameters
显示参数, the parameters will not be lost when the page is refreshed
// 跳转到的页面路由配置文件
{
path: '/A' 或 , path: '/A/:id'
name: 'XXX',
component: XXX
}
/// 点击方法：
this.$router.push({path: '/A?id=aaa'})
或
this.$router.push({path: '/A/aaa'})
// 接收参数的页面
console.log(this.$route.params.id)
2. query parameters
- The page routing address when passing parameters
显示参数, the parameters will not be lost when the page is refreshed
// 跳转到的页面路由配置文件
{
path: '/A' 或 , path: '/A/:id'
name: 'XXX',
component: XXX
}
/// 点击方法：
this.$router.push({
name: 'A',
query: {
id: 'aaa'
}
})
// 接收参数的页面
console.log(this.$route.query.id)