詳解vue巢狀路由 query傳遞引數

2022-09-27 10:12:16 字數 727 閱讀 7007

在巢狀路由中我們經常會遇到父路由向子路由裡面傳遞引數,傳遞引數有兩種方法,通過 q程式設計客棧uery 或者 params

index.html

main.js 同樣通過重定向來顯示父路由

import vue from 'vue'

import vuerouter from 'vue-router'

vue.use(vuerouter)

//引入兩個元件

import home from "./home.vue"

impwww.cppcns.comort game from "./ga程式設計客棧me.vue"

//定義路由

const routes = [

,//重定向

] }

] //建立路由例項

const router = new vuerouter()

new vue(,

methods: ,

router

})home.vue 通過query來傳遞num引數為1,相當與在 url 位址後面拼接引數

}">

顯示 game.vue 子路由中通過 this.$route.query.num 來顯示傳遞過來的引數

執行後的結果,傳遞的引數在位址列中有顯示

本文標題: 詳解vue巢狀路由-query傳遞引數

本文位址: /ruanjian/j**a/191911.html

vue中路由巢狀 路由傳參

在vue中使用vue router方便我們進行頁面之間的跳轉,元件 components 對映到路由 routes 然後告訴 vue router 在 渲染它們。每個路由應該對映乙個元件。go to foo go to bar 實現路由跳轉的兩種方法,一種為path,另一種為name path he...

Vue巢狀路由

src components index page index2 router index.js main.js html部分 2級頁面在此顯示 import vue from vue import router from router 引入router.js import vuex from vu...

vue 巢狀路由

在乙個頁面中如果想實現三個頁面的拼接組成乙個頁面,這時候就用到巢狀路由了。第一種方法 1.頂部頁面 views home.vue class drophead 個人資訊 退出2.左側欄頁面 view menusecond.vue 3.右側欄頁面 view menuthird.vue 需簽約檢視 路由...