vue路由传参并跳转页面
Posted xiaoxiaomini
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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包含传递的所有参数 },
以上是关于vue路由传参并跳转页面的主要内容,如果未能解决你的问题,请参考以下文章