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之動態路由、巢狀路由Vue路由巢狀
- Vue-Router學習第二彈動態路由\懶載入\巢狀路由Vue路由巢狀
- vue路由巢狀Vue路由巢狀
- angular 巢狀路由Angular巢狀路由
- 淺談Vue-router使用方法及動態路由和巢狀路由的使用Vue路由巢狀
- vue(19)巢狀路由Vue巢狀路由
- 為什麼HTML不能巢狀PHP,而PHP檔案卻可以巢狀HTMLHTML巢狀PHP
- 聚合路由器5G+4G是什麼意思路由器
- 手寫vue-router & 什麼是Vue外掛Vue
- 什麼是自愈路由?自愈路由自愈網路有什麼好處路由
- 什麼是聚合路由器、聚合路由器有什麼用路由器
- vue學習十四(巢狀路由、命名路由、命名檢視、重定向)Vue巢狀路由
- Go Error 巢狀到底是怎麼實現的?GoError巢狀
- vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由Vue筆記路由巢狀
- vue 基礎入門筆記 18:路由巢狀Vue筆記路由巢狀
- dom4j遍歷巢狀xml巢狀XML
- 你知道什麼是路由器嗎?路由器
- HTTP狀態程式碼是什麼?HTTP
- vue麵包屑(vue動態路由多級巢狀麵包屑怎麼弄)Vue路由巢狀
- python怎麼迴圈巢狀Python巢狀
- vue-router路由基礎Vue路由
- vue2進階篇:vue-router之命名路由Vue路由
- IdentityServer4是什麼IDEServer
- tp link路由器地址是什麼路由器
- 06 . Vue路由簡介,原理,實現及巢狀路由,動態路由,程式設計式導航Vue路由巢狀程式設計
- less巢狀巢狀
- Datalist巢狀巢狀
- Laravel 之巢狀事務 transactions 實現Laravel巢狀
- MongoDB之資料查詢(巢狀集合)MongoDB巢狀
- vue-router 原始碼:路由模式Vue原始碼路由模式
- vue-router 原始碼:前端路由Vue原始碼前端路由
- 什麼是路由器的網路管理功能?路由器
- 集合框架-集合的巢狀遍歷(HashMap巢狀HashMap)框架巢狀HashMap
- 集合框架-集合的巢狀遍歷(HashMap巢狀ArrayList)框架巢狀HashMap
- 集合框架-集合的巢狀遍歷(ArrayList巢狀HashMap)框架巢狀HashMap
- 集合框架-集合的巢狀遍歷(多層巢狀)框架巢狀