以下是巢狀路由設定方法

一、建立巢狀元件

比如Home下有1個新聞列表和一個訊息列表。分別建立新聞元件和訊息元件，這2個元件和Home元件不是父子元件關係

HomeNews.vue

 1 <template>
 2   <div>
 3     <ul>
 4       <li>新聞1</li>
 5       <li>新聞2</li>
 6       <li>新聞3</li>
 7       <li>新聞4</li>
 8     </ul>
 9   </div>
10
 
 </template>
11 
12 <script>
13 export default {
14   name: "HomeNews"
15 }
16 </script>
17 
18 <style scoped>
19 
20 </style>

HomeMessages.vue 訊息子元件

 1 <template>
 2   <div>
 3     <ul>
 4       <li>訊息1</li>
 5       <li>訊息2</li>
 6
 
       <li>訊息3</li>
 7       <li>訊息4</li>
 8     </ul>
 9   </div>
10 </template>
11 
12 <script>
13 export default {
14   name: "HomeMessage"
15 }
16 </script>
17 
18 <style scoped>
19 
20 </style>

二、配置元件與路由的關係

router/index.js

 1 import Vue from 'vue'
 2
 
 import VueRouter from 'vue-router'
 3 
 4 // 路由的懶載入
 5 const Home = () => import('../components/Home')
 6 const About = () => import('../components/About')
 7 const User = () => import('../components/User')
 8 const HomeMessages = ()=>import('../components/HomeMessages')
 9 const HomeNews = ()=>import('../components/HomeNews')
10 
11 
12 Vue.use(VueRouter)
13 
14 const routes = [
15   {
16     path: '',
17     redirect: '/home'
18   },
19   {
20     path: '/home',
21     component: Home,
22     children:[
23       {
24         path:'',
25         redirect:'news'
26       },
27       {
28         path:'news',
29         component:HomeNews
30       },
31       {
32         path:'messages',
33         component:HomeMessages
34       }
35     ]
36   },
37   {
38     path: '/about',
39     component: About
40   },
41   {
42     path: '/user/:userName1',
43     component: User
44   }
45 ]
46 
47 const router = new VueRouter({
48   routes,
49   mode:'history'
50 })
51 
52 export default router

其中：

1.新聞元件和訊息元件的路由編寫在Home元件的children屬性內，格式的Home元件一模一樣，包括預設路徑也是重定向方式展示

2.巢狀路由的路徑不包括上級路由的路徑，比如新聞元件的路徑就寫 news

三、巢狀元件的展示層（view層）在被巢狀元件內部編寫，使用router-link,router-view標籤，並定義巢狀元件跳轉的路由路徑

components/Home.vue

 1 <template>
 2   <div>
 3     <h2>我是首頁</h2>
 4     <router-link to="/home/news">新聞</router-link>
 5     <router-link to="/home/messages">訊息</router-link>
 6     <router-view></router-view>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: "Home"
13 }
14 </script>
15 
16 <style scoped>
17 
18 </style>

npm run dev，頁面顯示結果如下：

本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/14987566.html