Vue nested dynamic routes without route prefix

user_17964589 0
Viewed 269

I have set up a locale parameter, for example: /en.

My goal is to achieve a nested category lookup by routes for example:

  1. with placeholders: /:locale/:category/:subcategory/:process
  2. real world example: /en/business/tax/1c7e7b66-ec6c-4431-9e84-87f2f2ace369

The issue is when I attempt to access the subcategory route the router displays the category component.

Please see my router file below:

router/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
                }
              ]
            }
          ]
        }
      ]
    }
  ]
})
vue-router vue.js
1 Answers

I think you have to put the / in the child path like this and not in the parent path :

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
                }
              ]
            }
          ]
        }
      ]
user_108058720
Related