如何生成基于一个基本路径子组件路由

Question

如何获得在VUE路由器的下一个路由

我有以下途径：/principal

{path: '/principal', component: Principal}

现在，我需要开车具有相同的URL基地等组成， 新网址如下：

/principal/compa

是否有可能让单个基本路线能够显示其他组件？

类似这样的事情（我知道vue-router不能像这样工作），但你如何得到这种行为？

{ path: '/principal', component: Principal, subpath: { path: 'compa', component: 'CompA' } }

感谢

Answer 1

有一个在VueRouter构造配置一个children选项来渲染嵌套路线Vue公司的组件。

在这种特殊情况下，这将是：

{ 
    path: '/principal', 
    component: Principal, 
    children: [{ 
    path: 'compa', // it would match /principal/compa 
    component: CompA 
    }] 
} 

从VUE路由器DOC：

const router = new VueRouter({ 
    routes: [ 
    { 
     path: '/user/:id', 
     component: User, 
     children: [ // <-- notice the children property 
     { 
      // UserProfile will be rendered inside User's <router-view> 
      // when /user/:id/profile is matched 
      path: 'profile', 
      component: UserProfile 
     }, 
     { 
      // UserPosts will be rendered inside User's <router-view> 
      // when /user/:id/posts is matched 
      path: 'posts', 
      component: UserPosts 
     } 
     ] 
    } 
    ] 
}); 

看一看nested routes了解更多详情。