vue cli巢狀路由

2022-03-22 04:07:01 字數 522 閱讀 3557

很多人在路由巢狀這個部分就很是搞不清楚,下面我講一下在vue-cli中路由的巢狀。

我們在這個資料夾中定義路由規則

index.js 詳情

第一步:引入 vue-router,引入相關元件。

第二步:例項化路由並且export default匯出

第三部:建立路由規則

父路由的路徑:/就是專案一啟動就呼叫父路由

定義了 路由的path ,component

第四部定義子路由:

子路由放在父路由的children這個陣列中

陣列中是成員物件,每乙個物件代表乙個子路由

子路由的建立規則與父路由相同,path,component

這裡注意一下,子路由的path :不能加/

vue router 巢狀路由

我們已經學習過了vue模板的另外定義形式,使用。首頁 新聞然後js裡定義路由元件的時候 1.定義 路由 元件。const home const news 實際應用介面,通常由多層巢狀的元件組合而成。比如,我們 首頁 元件中,還巢狀著 登入 和 註冊 元件,那麼url對應就是 home login和 ...

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...

react router 巢狀路由

import react from react import from react router dom export default function function home console.log match return h2 function about function topics ...