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包含传递的所有参数 },
posted @ 2020-11-29 22:19  R_Oasis  阅读(147)  评论(0编辑  收藏  举报