Vue 라우터에서 이러한 유형의 경로 이중화를 방지하는 방법

Vue 라우터에서 이러한 유형의 경로 이중화를 방지하는 방법

그래서, 우리가 보통 이렇게 하는 것처럼, 라우팅에 대해서.

const routes = [
{
    path: '/store',
    component: Dashboard
},
{
    path: '/store/products',
    component: ProductsView
},
{
    path: '/store/products/add',
    component: ProductsAddView
},
]

여기 내가 길을 쓰고 있다./store언제나이 오솔길의 시작을 한 번이라도 쓸 수 있는 방법은 없을까?

라우터에게 말해주고 싶어, 만약 네가 찾으면/products or /products/add다음에/store그런 다음 이러한 견해를 제시하십시오.모든 경로를 기록하지 않을 때마다/store/products.

Vue 라우터에 중첩된 경로를 사용하십시오.

사용 사례에 맞게 수정된 Vue 라우터 설명서의 예:

const router = new VueRouter({
  routes: [
    { 
      path: '/store/', 
      component: Dashboard,
      children: [
        {
          // route /store/products
          path: 'products',
          component: ProductsView
          children: [
            // route /store/products/add
            path: 'add',
            component: ProductsAddView
          ]
        }
      ]
    }
  ]
})

실시간 예제에 대한 Vue 라우터 설명서의 Jsfiddle.

참조URL: https://stackoverflow.com/questions/60911141/how-to-avoid-this-type-of-path-redundancy-in-vue-router