Vue-Router之嵌套路由

在路由配置中，配置children

1. import Vue from 'vue'
2. import VueRouter from 'vue-router'
4. Vue.use(VueRouter)
6. const router = new VueRouter({
7.     mode: 'history',
8.     base: import.meta.env.BASE_URL,
9.     routes: [
10.         {
11.             path: '/',
12.             redirect: '/home'
13.         },
14.         {
15.             path: '/home',
16.             name: 'home',
17.             component: () => import('../views/HomeView.vue'),
18.             children: [
19.                 {
20.                     path: 'news',
21.                     name: 'news',
22.                     component: () => import('../views/NewsView.vue'),
23.                 },
24.                 {
25.                     path: 'message',
26.                     name: 'message',
27.                     component: () => import('../views/MessageView.vue'),
28.                 },
29.             ]
30.         },
31.         {
32.             path: '/about',
33.             name: 'about',
34.             component: () => import('../views/AboutView.vue')
35.         },
37.     ]
38. })
40. export default router

复制代码

在子页面中，继承使用router-link与router-view

1. <script>
2. export default {
3.   name: "HomeView"
4. }
5. </script>
7. <template>
8.   <div class="home-container">
9.     <h3>Home组件</h3>
10.     <router-link to="/home/news">News</router-link><br>
11.     <router-link to="/home/message">Message</router-link>
12.     <router-view></router-view>
13.   </div>
15. </template>
17. <style scoped>
18. .home-container {
19.   min-height: 150px;
20.   background-color: #f2f2f2;
21.   padding: 15px;
22. }
24. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。