vue中路由巢狀的作用
阿新 • • 發佈：2020-12-27
vue中為什麼要有路由巢狀啊，一般的路由不就行了嗎？我們可以看一個很簡單的例子，頁面效果是這樣的：
html檔案：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"View Code></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/user">父元件1</router-link> <router-link to="/register">父元件2</router-link> <router-view></router-view> </div> <script> // 父元件1 let user = { template: `<h1>user</h1>` } // 父元件2 let register = { template: ` <div> <router-link to="/register/tab1">tab1</router-link> <router-link to="/register/tab2">tab2</router-link> <router-view></router-view> </div> ` } // 子元件1 let tab1 = { template: `<h1>tab1</h1>` } //子元件2 let tab2 = { template: `<h1>tab2</h1>` } // 路由例項 let router = new VueRouter({ routes: [ { path: "/user", component: user }, { path: "/register", component: register, children: [ // { path: "/register/tab1", component: tab1 }, // { path: "/register/tab2", component: tab2 }, ] }, { path: "/register/tab1", component: tab1 }, { path: "/register/tab2", component: tab2 }, ] }) // vue例項 new Vue({ el: '#app', data: { message: '頁面加載於 ' + new Date().toLocaleString() }, router }) </script> </body> </html>
當我們點選父元件2，就會在最上面的那個佔位符<router-view>這裡展示register元件，下圖所示：
問題來了，如果我們再點選tab1呢？因為有兩個<router-view>，你覺得tab1元件內容會展示在哪個<router-view>佔位符裡？
答案是取決於你的/register/tab1這個路由是寫在哪裡？如果是放在外面，那麼tab1就展示在第一個<router-view>；如果寫成/register路由的巢狀路由，才會展示在第二個<router-view>；所以巢狀路由的作用就是讓新的頁面內容展示在子元件的佔位符中；