ベースパスに基づいてサブコンポーネントのルートを生成する方法</p> <p>は、私は次のルート持っVUE-ルータで次のルートを取得する方法

Question

：今/principal

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

を、私が運転する必要があるが同じURLベースを持っている他のコンポーネント、 次のように新しいURLは次のようになります。

/principal/compa

単一の基本ルートで他のコンポーネントを表示できるようにすることはできますか？

何かこれ（私はvue-routerがこのように動作しないことを知っています）が、どのようにこの動作をしますか？

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

おかげ

Answer 1

ネストされたルートでVueのコンポーネントをレンダリングするVueRouterコンストラクタの設定でchildrenオプションがあります。その特定のケースで

、それは次のようになります。

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

VUE-ルータドキュメントから：

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を見てください。