vue路由傳參並跳轉頁面
阿新 • • 發佈:2018-12-17
在vue專案中引數的傳遞可以使用本地快取或者Vuex,那麼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.parms//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包含傳遞的所有引數 },