[Vuejs]-What is the best practice for implementing multiple paths for one component in Vue router?

by

2👍

✅

You have to add the alias option (docs)

Example from the docs.

   ...
   {
    path: '/',
    name: 'home',
    component: HomeView,
    alias: '/home'
  },
   ...

From the docs:

You can even combine both and provide multiple aliases with an array:

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // this will render the UserList for these 3 URLs
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]
👤Fanoflix

2👍

First of all don’t use the same name for 2 different routes. There are 2 methods call Redirect and Alias: https://router.vuejs.org/guide/essentials/redirect-and-alias.html

You can check them out. In my opinion Redirect method might make your code (in this case) more readable.

Example:

const routes = [
  {
    path: '/',
    redirect: { name: 'home' },
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView,
  }
]
👤Quốc Cường

Leave a comment