Vue CLI嵌套路由问题：<router-view/>无法显示部分子组件

嘿，我仔细看了你的路由配置和Home组件代码，一下子就找到问题啦！问题出在嵌套路由的路径写法上。

在Vue Router的规则里，嵌套路由的子路由如果path以/开头，就会被识别成绝对路径，完全脱离父路由的层级。你看你配置的innerView2_1、innerView2_2这些子路由，path都是/innerView2_1这种带斜杠的写法，这就导致它们根本没和父路由innerView2、innerView3形成嵌套关系，自然没法在Home组件的<router-view>里渲染出来。

具体修改步骤： #

1. 修正router/index.js的路由配置

把嵌套子路由的path开头的/去掉，改成相对路径，同时给没有component的父路由（innerView2、innerView3）补充默认内容（要么加个空组件，要么配置默认子路由）：

import innerView1 from '@/components/mainViews/innerView1'
import innerView2_1 from '@/components/mainViews/innerView2_1'
import innerView2_2 from '@/components/mainViews/innerView2_2'
import innerView3_1 from '@/components/mainViews/innerView3_1'
import innerView3_2 from '@/components/mainViews/innerView3_2'
import innerView4 from '@/components/mainViews/innerView4'
// 可以导入一个空组件或者复用子组件作为父路由默认显示
// import EmptyView from '@/components/EmptyView'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Home',
      name:'Home',
      component: Home,
      children: [
        {
          path: 'innerView1', // 这里也可以去掉/，子路由默认是相对路径
          name: 'innerView1',
          component: innerView1
        },
        {
          path: 'innerView2',
          name: 'innerView2',
          // 父路由可以加个默认组件，或者配置默认子路由
          // component: EmptyView,
          children: [
            // 去掉path开头的/，改成相对路径
            { path: 'innerView2_1', name: 'innerView2_1', component: innerView2_1 },
            { path: 'innerView2_2', name: 'innerView2_2', component: innerView2_2 },
            // 可选：配置默认子路由，进入innerView2时自动显示innerView2_1
            // { path: '', redirect: 'innerView2_1' }
          ]
        },
        {
          path: 'innerView3',
          name: 'innerView3',
          children: [
            { path: 'innerView3_1', name: 'innerView3_1', component: innerView3_1 },
            { path: 'innerView3_2', name: 'innerView3_2', component: innerView3_2 },
            // 可选：默认跳转
            // { path: '', redirect: 'innerView3_1' }
          ]
        },
        {
          path: 'innerView4',
          name: 'innerView4',
          component: innerView4
        }
      ]
    },
    {
      path: '/Login',
      name: 'Login',
      components: { default: Login }
    }
  ]
})

2. 验证路由跳转逻辑

修改后，当你点击innerView2_1的菜单时，路由会变成/Home/innerView2/innerView2_1，这个路径会正确匹配嵌套路由规则，对应的组件就能在Home的<router-view>里正常显示了。

另外提个小建议：你可以给innerView2和innerView3配置默认子路由（比如上面注释里的{ path: '', redirect: 'innerView2_1' }），这样用户点击父菜单时，不会出现空白的<router-view>，体验会更好。

内容的提问来源于stack exchange，提问作者吳約南