詳解vue嵌套路由-query傳遞參數(shù)
更新時(shí)間：2017年05月23日 09:38:51 作者：安靜的對(duì)折
本篇文章主要介紹了詳解vue嵌套路由-query傳遞參數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在嵌套路由中我們經(jīng)常會(huì)遇到父路由向子路由里面?zhèn)鬟f參數(shù)，傳遞參數(shù)有兩種方法，通過(guò) query 或者 params
index.html
<div id="app"> <!-- router-view 路由出口, 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div>
main.js 同樣通過(guò)重定向來(lái)顯示父路由
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", component: game }
]
}
]
//創(chuàng)建路由實(shí)例
const router = new VueRouter({routes})
new Vue({
el: '#app',
data: {
id:123,
},
methods: {
},
router
})
home.vue 通過(guò)query來(lái)傳遞num參數(shù)為1，相當(dāng)與在 url 地址后面拼接參數(shù)
<template>
<div>
<h3>首頁(yè)</h3>
<router-link :to="{ path:'/home/game', query: { num: 1} }">
<button>顯示<tton>
</router-link>
<router-view></router-view>
</div>
</template>
game.vue 子路由中通過(guò) this.$route.query.num 來(lái)顯示傳遞過(guò)來(lái)的參數(shù)
<template>
<h3>王者榮耀{{ this.$route.query.num }}</h3>
</template>
運(yùn)行后的結(jié)果，傳遞的參數(shù)在地址欄中有顯示
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-router優(yōu)化import引入過(guò)多導(dǎo)致index文件臃腫問(wèn)題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過(guò)多導(dǎo)致index文件臃腫問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要給大家介紹了關(guān)于vue3獲取、設(shè)置元素高度的相關(guān)資料,小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單易懂,需要的朋友可以參考下2024-08-08
element表格數(shù)據(jù)部分模糊的實(shí)現(xiàn)代碼
這篇文章給大家介紹了element表格數(shù)據(jù)模糊的實(shí)現(xiàn)代碼,文中有詳細(xì)的效果展示和實(shí)現(xiàn)代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
Vue?項(xiàng)目的成功發(fā)布和部署的實(shí)現(xiàn)
本文主要介紹了Vue?項(xiàng)目的成功發(fā)布和部署的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue項(xiàng)目引入svg圖標(biāo)的完整步驟
在實(shí)際的項(xiàng)目開(kāi)發(fā)中,使用svg圖標(biāo)占用內(nèi)存比圖片更小,映入圖片內(nèi)存比較大,同時(shí)也適用于不同屏幕的尺寸,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目引入svg圖標(biāo)的完整步驟,需要的朋友可以參考下2022-10-10
vue3.x使用swiper實(shí)現(xiàn)卡片輪播
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiper實(shí)現(xiàn)卡片輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue中data和data()的區(qū)別說(shuō)明
這篇文章主要介紹了vue中data和data()的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
npm install sentry-cli失敗的問(wèn)題解決
本文主要介紹了npm install sentry-cli失敗的問(wèn)題解決,文章首先描述了問(wèn)題現(xiàn)象,然后分析了問(wèn)題的原因,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
Vue cli構(gòu)建及項(xiàng)目打包以及出現(xiàn)的問(wèn)題解決
這篇文章主要介紹了Vue cli構(gòu)建及項(xiàng)目打包以及出現(xiàn)的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08