vue router - where to store route names?

Question

I'm building a fairly large app using Vue and I have a lot of routes, names and logic behind them. I found a great question/answer about Vue Router here and it gave me a lot of ideas, but I wasn't able to find an answer for myself. If I missed something, please feel free to point me in the right direction.

Here are my issues:

1. Renaming hell: whenever I change a name of the route I have to go and find all the self.$router.replace({ name: 'OldRouteName' }) and change them. Maybe it doesn't sound like a big deal, but it is, especially in a big project
2. Global guard hell: in a way it is related to the #1 where I'm relying on the text literals to analyze from and to and call my next({ name: 'RouteName', replace: true })

There are a few other minor things on the list, but those two are big for me. My thought was to create a global object and store route names there something like Vue.prototype.$myRoutes = {Index:'Index', Home: 'Home'} etc, but for some reason it doesn't feel right. I hope there is something better out there

Any help appreciated, thanks!

Answer 1

Just like you can store Vuex mutation types in constants, so too can you store route names.

For example

// router/route-names.js
export const INDEX = "Index"
export const HOME = "Home"

Now wherever you need them, you just import from this file

import { INDEX, HOME } from '@/router/route-names'

Making changes means only editing one file.

---

For point #2, you can store extra data in each route's meta property. For example

{
  name: ROUTE_A,
  path: '/route/a',
  meta: {
    nextRoute: { name: ROUTE_B, replace: true }
  }
}

Then you can use

next(from.meta.nextRoute)