vue-router 多层嵌套问题

Question

第三层嵌套时，依然显示第二层路由的内容，请问是什么原因？

Answer 1

首先说下，不要发截图，直接发代码，这样我可以直接用你的代码修改。

你的路由标签定义错了，第三级路由需要在UserPosts这个组件里匹配 <router-view></router-view>，但是你的UserPosts里没有写<router-view></router-view>，而且你在User组件里写了两个 <router-view></router-view>会被匹配两次。

先把template模板修改一下吧。

路由配置参考下面的代码吧。

new Router({

  routes: [{

    {

      path: '/user/:id',

      component: User,

      children: [{

        path: '/user/:id/posts',

        component: UserPosts,

        children: [{

          path: '/user/:id/posts/third',

          component: Third

        }]

      }]

    }

  }]

})