第一种方式
必须在路由的path上配置相关参数
路由配置(必须
):
{ path: '/details/:id', name: 'Details', component: Details }
传参
toDetails(id){
this.$router.push({ path: `/details/${id}` })
}
获取参数
mounted() {
let id = this.$route.params.id
}
注:传递的参数显示在地址栏上,刷新页面参数不会丢失。
第二种方式
不需要路由有其他额外的配置
路由配置:
{ path: '/details', name: 'Details', component: Details }
传参
toDetails(id){
this.$router.push({
name: `Details` // 这里使用的是路由配置里面的name值
params: {
id: id
}
})
}
获取参数
mounted() {
let id = this.$route.params.id
}
注:传递的参数不显示在地址栏上,刷新页面参数会丢失.
第三种方式
不需要路由有其他额外的配置
路由配置:
{ path: '/details', name: 'Details', component: Details }
传参
toDetails(id){
this.$router.push({
path: `/details`
query: {
id: id
}
})
}
获取参数
mounted() {
let id = this.$route.query.id
}
注:传递的参数会显示在地址栏上,中文会进行相应的转码,刷新页面参数不会丢失。
如有不足,望大家多多指点! 谢谢!