CODEWITHSUNDEEP
vuejs2vue-router
bashkovpd
bashkovpd

Reputation: 598

How to group routes in vue-router

On my site I have a navigations with some categories and nested navigation anchors in them. How can I group this routes in vue-router? The best I've come up with is to place for each route a meta and then group by it.

Upvotes: 5

Views: 9867

Answers (3)

Pablo Papalardo
Pablo Papalardo

Reputation: 1312

I use like this (look that component: { render: h => h('router-view') }): 

      {
// =============================================================================
// MAIN LAYOUT ROUTES
// =============================================================================
        path: '',
        component: () => import('./layouts/main/Main.vue'),
        children: [
// =============================================================================
//    Routes
// =============================================================================
          {
            path: '/',
            name: 'home',
            component: () => import('./views/Dashboard.vue'),
          },
// =============================================================================
//    User Routes
// =============================================================================
          {
            path: '/user',
            name: 'user',
            component: { render: h => h('router-view') },
            children: [
              {
                path: 'list',
                name: 'user.list',
                component: () => import('./views/pages/User/List.vue'),
              },
            ]
          },

        ],
      }

Upvotes: 8

AndrewRIGHT
AndrewRIGHT

Reputation: 470

There is forked and fixed example: https://jsfiddle.net/andrewright/wsmx92bg/

You should know, that children routers opens inside parent template. That means you need to add additional <router-view> inside parent template.

The idea is that: children routers change some block, like part of parent content. Good way to use it - for subcategory menu.

Upvotes: 1

Sinan
Sinan

Reputation: 5980

You can use nested routes. In your routes file you can do something similar.

{
  path: '/category',
  name: 'category',
  component: Category,
  children: [
      {
         path: 'subcategory',
         name: 'subCategory',
         component: ChildComponent,
      },
      // other nested routes
  ]
},

Upvotes: 0

Related Questions