4、vue-router之什麼是巢狀路由
上一次給大家簡單說了下什麼是動態路由現在我們來講講巢狀路由。
GitHub:https://github.com/Ewall1106/mall
1.巢狀路由的使用場景是什麼呢?
大家都知道選項卡,在選項卡中,頂部有數個導航欄,中間的主體顯示的是內容;這個時候,整個頁面是一個路由,然後點選選項卡切換不同的路由來展示不同的內容,這個時候就是路由中巢狀路由。
2.具體是怎麼實現的?
① 為了演示,我們現在view資料夾下新建一個title1.vue
和title2.vue
用來存放不同的內容
② 現在我們在router
》 index.js
中將這上面兩個新建的元件引入進來並填寫路徑,這裡的Title1
和Title2
是作為test.vue
頁面的子路由,所以要寫在children
屬性下
這裡需要提個醒的就是填寫children
子路由的path
不要加/
③ 然後我們再去到test.vue中敲:
在這裡提個醒,在to
後面寫路由路徑的時候,一定到帶上絕對路徑,也就是要把test
這個父路由路徑寫進去"/test/title1"
④ 最後我們進入瀏覽器點選不同的標題就可以看到不同內容的展示
相關文章
- vue-router 巢狀路由Vue巢狀路由
- 3 vite vue-router 路由巢狀ViteVue路由巢狀
- Vue-Router學習第二彈動態路由\懶載入\巢狀路由Vue路由巢狀
- vue路由巢狀Vue路由巢狀
- 淺談Vue-router使用方法及動態路由和巢狀路由的使用Vue路由巢狀
- vue(19)巢狀路由Vue巢狀路由
- Vue中的巢狀路由Vue巢狀路由
- 為什麼HTML不能巢狀PHP,而PHP檔案卻可以巢狀HTMLHTML巢狀PHP
- vue學習十四(巢狀路由、命名路由、命名檢視、重定向)Vue巢狀路由
- 聚合路由器5G+4G是什麼意思路由器
- vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由Vue筆記路由巢狀
- vue 基礎入門筆記 18:路由巢狀Vue筆記路由巢狀
- Go Error 巢狀到底是怎麼實現的?GoError巢狀
- 手寫vue-router & 什麼是Vue外掛Vue
- 什麼是自愈路由?自愈路由自愈網路有什麼好處路由
- 什麼是聚合路由器、聚合路由器有什麼用路由器
- dom4j遍歷巢狀xml巢狀XML
- python怎麼迴圈巢狀Python巢狀
- 06 . Vue路由簡介,原理,實現及巢狀路由,動態路由,程式設計式導航Vue路由巢狀程式設計
- Python基礎之函式的巢狀Python函式巢狀
- Laravel 之巢狀事務 transactions 實現Laravel巢狀
- vue2進階篇:vue-router之命名路由Vue路由
- vue-router路由基礎Vue路由
- 你知道什麼是路由器嗎?路由器
- HTTP狀態程式碼是什麼?HTTP
- IdentityServer4是什麼IDEServer
- vue-router 原始碼:路由模式Vue原始碼路由模式
- vue-router 原始碼:前端路由Vue原始碼前端路由
- 列表巢狀操作巢狀
- 032、Vue3+TypeScript基礎,巢狀子路由和query傳參VueTypeScript巢狀路由
- TCP為什麼是有狀態的?TCP
- 什麼是HTTP 304狀態程式碼?HTTP
- Linux中什麼是動態路由?動態路由協議有哪些?Linux路由協議
- vue-router路由之路-極簡教程Vue路由
- vue全家桶 ---vue-router路由篇Vue路由
- vue-router控制路由許可權Vue路由
- 巢狀類遞迴巢狀遞迴
- Blazor巢狀傳遞Blazor巢狀