詳解vue嵌套路由-params傳遞參數(shù)
在嵌套路由中，父路由向子路由傳值除了query外，還有params，params傳值有兩種情況，一種是值在url中顯示，另外一種是值不顯示在url中。
1、顯示在url中
index.html
<div id="app"> <!-- router-view 路由出口, 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div>
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)建路由實(shí)例
const router = new VueRouter({routes})
new Vue({
el: '#app',
data: {
id:123,
},
methods: {
},
router
})
home.vue 在home中具體的值就跟在路徑后面，如 “/home/game/123”，也就是說傳遞給子路由的值就是 123
<template>
<div>
<h3>首頁</h3>
<router-link to="/home/game/123">
<button>顯示</button>
</router-link>
<router-view></router-view>
</div>
</template>
game.vue 在子路由中，通過 this.$route.params.參數(shù)名來接受傳遞過來的值
<template>
<h3>王者榮耀{{ this.$route.params.num }}</h3>
</template>
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中。
<template>
<div>
<h3>首頁</h3>
<router-link :to="{ name:'game1', params: {num: 123} }">
<button>顯示</button>
</router-link>
<router-view></router-view>
</div>
</template>
運(yùn)行的結(jié)果如下圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3.0版本強(qiáng)勢升級點(diǎn)特性詳解
這篇文章主要介紹了Vue3.0版本強(qiáng)勢升級點(diǎn)特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2022-06-06
Vue拖拽組件列表實(shí)現(xiàn)動態(tài)頁面配置功能
這篇文章主要介紹了Vue拖拽組件列表實(shí)現(xiàn)動態(tài)頁面配置功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
使用vue.js進(jìn)行項(xiàng)目的開發(fā)已經(jīng)有了一定的時間，在任務(wù)的過程中以及和不同的開發(fā)使用者交流中，逐漸對vue.js的使用心得有了一定的積累。本文主要給大家分享一些開發(fā)時需要注意的事項(xiàng)2016-04-04
這篇文章主要為大家詳細(xì)介紹了在Vue中如何實(shí)現(xiàn)自定義hooks(組合式)函數(shù)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
Vue.js原理分析之nextTick實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue.js原理分析之nextTick實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題
這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3為什么這么快,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了vue更改數(shù)組中的值，本文通過兩個例子，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解
點(diǎn)擊彈窗其實(shí)就是添加一個彈窗圖層，然后在點(diǎn)擊的時候讓他顯示出來罷了。本文將利用openlayers實(shí)現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧2022-06-06
因?yàn)槌绦虻恼{(diào)試非常重要,程序猿可以利用好的調(diào)試方法去查找定位自己的問題所在之處,從而,達(dá)到糾正自己程序錯誤的地方,健壯自己的程序,讓問題變得越來越少,程序變得越來越健康,所以本文給大家介紹了Vue程序調(diào)試和排錯技巧,需要的朋友可以參考下2024-12-12