Programing

경로 접두사가 없는 Vue 중첩된 동적 경로

c10106 2022. 3. 22. 21:14
반응형

경로 접두사가 없는 Vue 중첩된 동적 경로

로케일 매개 변수를 설정했다(예:/en.

내 목표는 다음과 같은 경로별로 중첩된 범주 조회를 달성하는 것이다.

  1. 자리 표시자:/:locale/:category/:subcategory/:process
  2. 실제의 예:/en/business/tax/1c7e7b66-ec6c-4431-9e84-87f2f2ace369

문제는 내가 하위 카테고리 경로에 접속하려고 할 때 라우터가 카테고리 구성요소를 표시한다는 것이다.

아래 라우터 파일을 참조하십시오.

라우터/main.js

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/:locale',
      props: true,
      component: {
        render (c) { return c('router-view') }
      },
      children: [
        {
          path: ':categorySlug/',
          name: 'category',
          component: Category,
          props: true,
          children: [
            {
              path: ':subcategorySlug',
              name: 'subcategory',
              component: Subcategory,
              props: true,
              children: [
                {
                  path: ':processId',
                  name: 'process',
                  component: Process,
                  props: true
                }
              ]
            }
          ]
        }
      ]
    }
  ]
})

내 생각에 너는 그것을 넣어야 할 것 같아./부모 경로가 아닌 다음과 같은 자식 경로에서:

children: [
        {
          path: '/:categorySlug',
          name: 'category',
          component: Category,
          props: true,
          children: [
            {
              path: '/:subcategorySlug',
              name: 'subcategory',
              component: Subcategory,
              props: true,
              children: [
                {
                  path: '/:processId',
                  name: 'process',
                  component: Process,
                  props: true
                }
              ]
            }
          ]
        }
      ]

참조URL: https://stackoverflow.com/questions/70891502/vue-nested-dynamic-routes-without-route-prefix

반응형