I am currently working on a website where I need to set up different category pages using dynamic routes. To achieve this, I am utilizing vue-router and aiming for a single dynamic route that can switch between pages by loading different components.
Here are the specific routes I intend to implement:
example: '/shop/men' , '/shop/women','/shop/kids'
In my index.js file for the router, I have gender appended at the end of the route to determine which component should be loaded. However, I am encountering an issue in handling this aspect and dynamically loading the appropriate component based on it.
router-> index.js:
{
name: 'shop',
path: '/shop/:gender',
component: menCategoryViewsHandler('mencategory')
}
views -> viewHandler -> mencategory.js:
'use strict'
import Handle from '../mencategory.vue'
const camelize = str => str.charAt(0).toUpperCase() + str.slice(1)
// This function serves as a factory for creating root-level views dynamically,
// as they share similar logic except for the item types they display.
// Essentially acting as higher order components wrapping respective Vue files.
export default function ViewsHandler (type) {
console.log('1',type)
return {
name: `${type}-mencategory-view`,
asyncData ({store, route}) {
//@todo : add the ssr and routerbefore load change script here
return Promise.resolve({})
},
title: camelize(type),
render (h) {
return h(Handle,
{
props: {type},
},
)
},
}
}