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"></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>；所以嵌套路由的作用就是讓新的頁面內容展示在子組件的占位符中；