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