vue router 學習2 子路由

2021-10-04 18:46:25 字數 1210 閱讀 7770

實際生活中的應用介面，通常由多層的元件組合而成。同樣地，url 中各段動態路徑也按某種結構對應巢狀的各層元件。

借助vue-router，使用巢狀路由配置，就可以很簡單地表達這種關係。

我們來看這樣的乙個例子：

我們首先建立兩個新的元件，當做巢狀路由中的元件，

hi1.vue:
hi2.vue：
這兩個元件都是現實各自元件內部存放的msg值。

在 vue-router 中，作為其內部最賤的最頂層的出口，我們來這裡的 hi 元件
hi 元件中包含乙個元件，作為其內部路由的最頂層出口，然後在 router.js 中進行配置，在 hi 元件的children屬性中包含路由即可：

import vue from


'vue'


;import router from


'vue-router'


;import hello from


'@/components/helloworld'


;import hi from


'@/components/hi'


;import hi1 from


'@/components/hi1'


;import hi2 from


'@/components/hi2'


;vue.


use(router)


;export


default


newrouter(,


,,]}]})
這裡有乙個坑，子路徑前面是不能新增'/'的。

然後，使用yarn serve或者npm run serve進行執行，檢視結果：

vue router子路由 路由巢狀

定義 子路由，也叫路由巢狀，採用在children後跟路由陣列來實現，陣列裡和其他配置路由基本相同，需要配置path和component，然後在相應部分新增來展現子頁面資訊，相當於嵌入iframe。hello h1 新增子路由導航 導航 home 首頁 router link home one 子頁...

基礎 vue router實現子路由

例子一 index.js import vue from vue import router from vue router import helloworld from components helloworld import first from components first import ...

Vue路由（vue router）03（子路由）

對於單頁面的vue應用，子路由的配置可能是必不可少的，其實vue的子路由配置很簡單。這篇文章是基於上一片文章 路由配置02 的。示例需求，早footer.vue模組中配置子路由 示例檔案footer01.vue和footer02.vue 1.在components資料夾下新建乙個children資料...