Vue 巢狀路由使用總結(推薦)
開發環境
Win 10
node-v10.15.3-x64.msi
下載地址:
https://nodejs.org/en/
需求場景
如下圖,我們希望點選導航欄不同選單時,導航欄下方載入不同的元件,進而展示不同的頁面內容
解決方案
使用動態路由
新建home.vue作為子頁面元件
<template> <div> <h3>home Page</h3> <p>home page content</p> </div> </template> <script> export default { name: "homePage",}; </script> <style scoped> h3 { font-size: 30px; } </style>
新建nav1.vue作為子頁面元件
<template> <div> <h3>nav1 Page</h3> <p>nav1 page content</p> </div> </template> <script> export default { name: "nav1Page",}; </script> <style scoped> h3 { font-size: 30px; } </style> 新建index.vue作為父頁面 <template> <div class="container"> <div class="nav"> <ul> <li> <a @click="clickHome">首頁</a> </li> <li> <a @click="clickNav1">導航1</a> </li> </ul> </div> <div class="content"> <router-view></router-view> </div> </div> </template> <script> export default { methods: { clickHome() { this.$router.push("/index/home"); },clickNav1() { this.$router.push("nav1"); } } }; </script> <style> .nav ul { width: 100%; height: 30px; margin: 5px; padding: 0; } .nav ul li { float: left; /*橫排顯示*/ list-style-type: none; /*去掉前面的點*/ } .nav ul li a { width: 100px; display: block; /*設定為block,width才起作用*/ height: 28px; line-height: 28px; background: grey; color: #fff; margin: 0px 1px; font-size: 18px; text-align: center; text-decoration: none; } .nav ul li a:hover { width: 100px; height: 26px; line-height: 28px; border: 1px solid red; color: red; background: #fff; } .content { position: absolute; top: 40px; bottom: 0px; right: 10px; left: 15px; background: rgb(176,207,180) } </style>
說明:
1、
methods: { clickHome() { this.$router.push("/index/home"); },clickNav1() { this.$router.push("nav1"); } }
點選對應“首頁”選單,“導航1”時分別觸發呼叫這裡定義了兩個方法clickHome()和clickNav1(),兩個方法的實現都是呼叫this.$router.push(),
航到不同的 UR(跳轉到不同的頁面)。另外,push這個方法會向 history 棧新增一個新的記錄,所以,當用戶點選瀏覽器後退按鈕時,可以回到之前的頁面
需要注意的是,這裡給push方法提供的代表路徑的字串。如果該字串不以“/”打頭,則表示相對路徑,相對於父級路由的path。如果該字串以“/”打頭,則表示絕對路徑的,相對於根路徑“/”
例中,觸發clickNav1()呼叫時,提供的路徑字串為“nav1”,為相對路徑,父級路由路徑為/index,所以點選後跳轉的url路徑為/index/nav1。
例中,觸發clickHome()呼叫時,提供的路徑字串為“/index/home”,為絕對路徑,所以點選後跳轉的url路徑為/index/home。
2、
<div class="content"> <router-view></router-view> </div>
這裡通過在父頁面,即index.vue元件中新增<router-view></router-view>
實現動態載入不同元件頁面。點選導航選單時,會自動載入對應的元件,然後替換<router-view>元素為對應的元件內容。
參考連結:
https://router.vuejs.org/zh/guide/essentials/navigation.html
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
修改router/index.js
import Vue from "vue" import Router from "vue-router" import index from "@/views/index" import home from "@/views/home" import nav1 from "@/views/nav1" Vue.use(Router) export default new Router({ mode: "history",routes: [ { path: "/index",name: "index",component: index,children: [ { path: "/index/home",name: "home",component: home },{ path: "nav1",name: "nav1",component: nav1 } ] } ] })
說明:
1、vue路由通過children實現路由巢狀。個人理解,巢狀路由控制內容子元件內容的展示區:實現父元件的內容展示區保持不變,子元件內容展示區動態變化。
2、同this.$router.push(path),
這裡的path也分相對路徑(相對於父級路由的path路徑),和絕對路徑(相對於“/”)。如上,/index/home為絕對路徑,nav1為相對路徑(其絕對路徑為/index/nav1)。注意,這裡path是否為絕對路徑,不影響是否巢狀路由,是否巢狀路由,是通過children決定的,只是影響路由匹配。如上,如果path: "nav1",寫成path: "/nav1",,那麼執行this.$router.push("nav1")時,跳轉的url為/index/nav1,將找不到匹配的路由
3、this.$router.push(path) 和這裡routes的關係:
個人理解,執行this.$router.push(path)後,程式自動獲取需要跳轉的絕對url,暫且稱之為toPath,然後在routes中進行匹配,如果匹配到則載入對應的元件。
總結
通過router-view實現在當前指定容器中動態載入不同元件,展示不同頁面的大致實現思路:
1、 在當前頁面(這裡稱之為父頁面).vue檔案template模板中的指定位置(“包含”子元件內容的容器),新增<router-view></router-view>元素
2、 router/index.js中給父頁面路徑所在的路由,新增子路由:子元件的載入url對應的路由
以上所述是小編給大家介紹的Vue 巢狀路由使用總結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!