詳解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傳值是通過(guò) :[參數(shù)值] 如path: "/home/game/:num"
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入兩個(gè)組件
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”，也就是說(shuō)傳遞給子路由的值就是 123
<template>
<div>
<h3>首頁(yè)</h3>
<router-link to="/home/game/123">
<button>顯示</button>
</router-link>
<router-view></router-view>
</div>
</template>
game.vue 在子路由中，通過(guò) this.$route.params.參數(shù)名來(lái)接受傳遞過(guò)來(lái)的值
<template>
<h3>王者榮耀{{ this.$route.params.num }}</h3>
</template>
2、不顯示在url中，如果在PC端將傳遞的值顯示在url中，這樣無(wú)形中就存在安全隱患，如果客戶不小心修改了url那樣就會(huì)出錯(cuò)，移動(dòng)端就無(wú)所謂了，如何才能不顯示在url中，同樣很簡(jiǎn)單，但是需要給映射的路徑起一個(gè)別名，通過(guò)name來(lái)取別名
同樣只需將上面的main.js中的定義路由改為如下樣子，在子路由中通過(guò)name來(lái)給路徑其一個(gè)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ù)就不會(huì)顯示在url中。
<template>
<div>
<h3>首頁(yè)</h3>
<router-link :to="{ name:'game1', params: {num: 123} }">
<button>顯示</button>
</router-link>
<router-view></router-view>
</div>
</template>
運(yùn)行的結(jié)果如下圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3.0版本強(qiáng)勢(shì)升級(jí)點(diǎn)特性詳解
這篇文章主要介紹了Vue3.0版本強(qiáng)勢(shì)升級(jí)點(diǎn)特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2022-06-06
Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能
這篇文章主要介紹了Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
使用vue.js開(kāi)發(fā)時(shí)一些注意事項(xiàng)
使用vue.js進(jìn)行項(xiàng)目的開(kāi)發(fā)已經(jīng)有了一定的時(shí)間，在任務(wù)的過(guò)程中以及和不同的開(kāi)發(fā)使用者交流中，逐漸對(duì)vue.js的使用心得有了一定的積累。本文主要給大家分享一些開(kāi)發(fā)時(shí)需要注意的事項(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)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3為什么這么快,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了vue更改數(shù)組中的值，本文通過(guò)兩個(gè)例子，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解
點(diǎn)擊彈窗其實(shí)就是添加一個(gè)彈窗圖層，然后在點(diǎn)擊的時(shí)候讓他顯示出來(lái)罷了。本文將利用openlayers實(shí)現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧2022-06-06
因?yàn)槌绦虻恼{(diào)試非常重要,程序猿可以利用好的調(diào)試方法去查找定位自己的問(wèn)題所在之處,從而,達(dá)到糾正自己程序錯(cuò)誤的地方,健壯自己的程序,讓問(wèn)題變得越來(lái)越少,程序變得越來(lái)越健康,所以本文給大家介紹了Vue程序調(diào)試和排錯(cuò)技巧,需要的朋友可以參考下2024-12-12