vue嵌套路由中params傳遞參數(shù)的示例分析
這篇文章主要介紹vue嵌套路由中params傳遞參數(shù)的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為西峰企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計，西峰網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
在嵌套路由中，父路由向子路由傳值除了query外，還有params，params傳值有兩種情況，一種是值在url中顯示，另外一種是值不顯示在url中。
1、顯示在url中
index.html
main.js params傳值是通過 :[參數(shù)值] 如path: "/home/game/:num"
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入兩個組件
import home from "./home.vue"
import game from "./game.vue"
//定義路由
const routes = [
{ path: "/", redirect: "/home" },//重定向
{
path: "/home", component: home,
children: [
{ path: "/home/game/:num", component: game }
]
}
]
//創(chuàng)建路由實例
const router = new VueRouter({routes})
new Vue({
el: '#app',
data: {
id:123,
},
methods: {
},
router
})home.vue 在home中具體的值就跟在路徑后面，如 “/home/game/123”，也就是說傳遞給子路由的值就是 123
首頁
game.vue 在子路由中，通過 this.$route.params.參數(shù)名來接受傳遞過來的值
王者榮耀{{ this.$route.params.num }}
2、不顯示在url中，如果在PC端將傳遞的值顯示在url中，這樣無形中就存在安全隱患，如果客戶不小心修改了url那樣就會出錯，移動端就無所謂了，如何才能不顯示在url中，同樣很簡單，但是需要給映射的路徑起一個別名，通過name來取別名
同樣只需將上面的main.js中的定義路由改為如下樣子，在子路由中通過name來給路徑其一個game1的別名。
//定義路由
const routes = [
{ path: "/", redirect: "/home" },//重定向
{
path: "/home", component: home,
children: [
{ name: "game1", path: "/home/game/", component: game }
]
}
]home.vue 中router-link修改為:to="{ name:'game1', params: {num: 123} }" params中是要傳遞的參數(shù)，這樣傳遞的參數(shù)就不會顯示在url中。
首頁
運行的結(jié)果如下圖
以上是“vue嵌套路由中params傳遞參數(shù)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
標題名稱：vue嵌套路由中params傳遞參數(shù)的示例分析
分享鏈接：
http://weahome.cn/article/jjsjph.html
重慶分公司
重慶分公司
