[Vuejs]-Modular routing in vuejs

by

0👍

You need to use dynamic route matching along with a wrapper component which renders the correct Category component. This would handled by passing props to components.

// CategoryResolver.vue
import menCategory from './mencategory'
import womenCategory from './womencategory'
import kidsCategory from './kidscategory'

const components = {
  menCategory,
  womenCategory,
  kidsCategory
}
export default {
  functional: true,
  props: ['category'],
  render(h, ctx) {
    return h(`components[${category}Category`], ctx.data, ctx.children)
  }
}

Then your router would be defined as such:

const router = new VueRouter({
  routes: [
    { path: '/shop/:category', component: CategoryResolver, props: true  }
  ]
})

Say menCategoryViewsHandler('mencategory') returns a component called MenCat. It must have a prop that matches the route above, in this example category. In MenCat you would define:

export default {
    props: ['category'],
    ...
 }

Vue router will pass the matching url prop into your component for you.

Leave a comment