詳解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)文章
本文主要介紹了vue封裝tree組件實(shí)現(xiàn)搜索功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問(wèn)題和解決辦法
封裝一個(gè)組件時(shí),我使用到了v-for和v-if,它們?cè)谕粯?biāo)簽內(nèi),總是提示v-for循環(huán)出來(lái)的item在實(shí)例中沒(méi)有被定義,查詢資料后原因是因?yàn)関-for和v-if在同級(jí)使用時(shí),v-if優(yōu)先級(jí)比v-for高,所以本文給大家介紹了Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問(wèn)題和解決辦法2024-07-07
詳解Vue路由開(kāi)啟keep-alive時(shí)的注意點(diǎn)
這篇文章主要介紹了詳解Vue路由開(kāi)啟keep-alive時(shí)的注意點(diǎn)，非常具有實(shí)用價(jià)值，有興趣的朋友可以了解一下2017-06-06
本文主要介紹了Vue3里的EffectScope，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue3 onMounted異步函數(shù)同步請(qǐng)求async/await實(shí)現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請(qǐng)求async/await實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue自定義指令中無(wú)法獲取this的問(wèn)題及解決
這篇文章主要介紹了Vue自定義指令中無(wú)法獲取this的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
v-model用于表單數(shù)據(jù)的雙向綁定，其實(shí)它就是一個(gè)語(yǔ)法糖。這篇文章主要介紹了vue中v-model的應(yīng)用,需要的朋友可以參考下2018-06-06
這篇文章介紹了Vue.js中v-on指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目
后臺(tái)管理系統(tǒng)是我們?nèi)粘ｉ_(kāi)發(fā)學(xué)習(xí)經(jīng)常遇到的一個(gè)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了使用 vue-i18n 切換中英文效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05