[Vuejs]-Use same component with multiple routes, depending on path component type

by

0👍

✅

In the end, I have been able to find a “workaround”. For each of the routes, you can define aliases. So I changed the code to use them, and load up all the possible routes at start up:

// Generate the aliases
let cities = myCities.map(el => "/" + el.name.toLowerCase());

// Get the base case (i.e. the first element to have something to match against)
let baseCity = cities.splice(0, 1)[0];

export default new Router({
  ...
  routes: [
    {
      path: '/',
      ...
    },
    {
      path: '/search',
      ...
    },
    {
      path: baseCity,
      name: 'LevelTwoWithCity',
      component: LevelTwoView,
      alias: cities,
      ... // Here I set up the query object to be passed on
    },
    {
      path: '/:id',
      name: 'LevelThree',
      component: LevelThreeView
    },
    {
      path: '*',
      name: '404',
      component: NotFound,
    },
  ]
})

in theory, this could be implemented dinamically using the addRoutes() method described here

Leave a comment