vue路由传参并跳转页面
方式一：query传参
//传参
go(){
that.$router.push({
path:'/order',//跳转路径
name: 'Order',//跳转路径的name值，不写跳转后页面取不到参数
// 参数
query: {
name: 'name',
dataObj: {}
}
})
},
//跳转后页面取参
mounted(){
// 路由参数
let mm = this.$route.query//query包含传递的所有参数
},
But 浏览器地址栏中显示如下，所以如果参数保密，该方式慎用啦
方式二：parms传参
//传参
go(){
this.$router.push({
path:'/order',//跳转路径
name: 'Order',//跳转路径的name值，不写跳转后页面取不到参数
// 参数
params: {
name: 'name',
dataObj: {}
}
})
},
//跳转后页面取参
mounted(){
// 路由参数
let mm = this.$route.params//parms包含传递的所有参数
},
是的就是这么相似，但是传递的参数就不会显示在地址栏了，但是有没有注意到跳转路径的name值必传是不是也不够优雅，不传行不行？见方式三
方式三：不传name
不传name需要对路由配置文件的路径做些改动
//传参
go(){
let num = '33'
this.$router.push({
path:'/order' + '/' + num,
})
},
//路由配置文件
{
path: '/order/:id',//路由携带的参数
// path: '/order',
name: 'Order',
component: Order
},
//跳转后页面取参
mounted(){
// 路由参数
let mm = this.$route.params//parms包含传递的所有参数
},