【VUE 嵌套路由】

目录

1. 嵌套路由

2. 通俗小结

---

1. 嵌套路由

要使用菜单显示出“点击不同的菜单项显示不同的内容”的效果，需要使用嵌套路由！

因为，在当前设计中，App.vue是显示整个页面的入口，而App.vue就已经使用<router-view/>交由其它视图来负责显示，当使用HomeView.vue设计菜单后，点击左侧的菜单项，右侧应该显示对应的内容，根据点击的菜单项不同，右侧显示的内容也应该不同，所以，在HomeView.vue的页面主体部分，仍需要使用<router-view/>，则出现了App.vue中的<router-view/>嵌套了HomeView.vue中的<router-view/>。

在配置路由时，如果配置在router/index.js中的routes属性下，则视图会显示在App.vue的<router-view/>中，如果需要将视图显示在HomeView.vue的<router-view/>位置，则需要在HomeView.vue的路由配置中添加children属性，此属性的配置方式与routes完全相同，将需要显示在HomeView.vue的<router-view/>位置的视图配置在此children属性中即可！例如：

const routes = [
  {
    path: '/',
    component: HomeView,
    // ↓↓↓↓↓ 以下是新增的配置 ↓↓↓↓↓
    children: [
      {
        path: '/sys-admin/temp/admin/add-new',
        component: () => import('../views/sys-admin/temp/AdminAddNewView.vue')
      },
      {
        path: '/sys-admin/temp/admin/list',
        component: () => import('../views/sys-admin/temp/AdminListView.vue')
      }
    ]
    // ↑↑↑↑↑ 新增配置结束 ↑↑↑↑↑
  },
  {
    path: '/about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/login',
    component: () => import('../views/LoginView.vue')
  }
]

2. 通俗小结

• 路由配置 / 路由对象：即配置了path和component的对象
• 当你需要将某个视图显示在App.vue的<router-view/>位置，则将你的路由配置写在router/index.js的routes常量下，作为routes的数组元素即可
• 当你需要将某个视图显示在其它视图的<router-view/>位置，例如显示在HomeView.vue的<router-view/>位置，则在其它视图的路由配置中添加children属性，并将你的视图的路由配置在此children下即可

 

个人主页：居然天上楼

感谢你这么可爱帅气还这么热爱学习~~

人生海海，山山而川

你的点赞👍 收藏⭐ 留言📝 加关注✅

是对我最大的支持与鞭策