vue路由器-在哪里存储路由名称？

Question

我正在使用Vue构建一个相当大的应用程序，并且背后有很多路线，名称和逻辑。我发现了一个很好的问题/答案about Vue Router here，它给了我很多想法，但我自己却找不到答案。如果我错过了什么，请随时指出正确的方向。

这是我的问题：

1. 重命名地狱：每当我更改路线名称时，都必须去查找所有self.$router.replace({ name: 'OldRouteName' })并进行更改。也许这听起来没什么大不了，但尤其是在大型项目中
2. 全球警卫队地狱：在某种程度上与我依靠文字文字分析from和to并称呼我的next({ name: 'RouteName', replace: true })

列表中还有其他一些小事情，但是那两个对我来说很重要。 我的想法是创建一个全局对象，并在其中存储路由名称，例如Vue.prototype.$myRoutes = {Index:'Index', Home: 'Home'}等，但是由于某种原因，感觉不对。我希望那里有更好的东西

任何帮助表示感谢，谢谢！

Answer 1

就像您可以存储Vuex mutation types in constants一样，您也可以存储路线名称。

例如

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

现在，无论您在哪里需要它们，都只需从此文件导入

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

进行更改意味着仅编辑一个文件。

---

对于点2，您可以在每个route's meta property中存储额外的数据。例如

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

然后您就可以使用

next(from.meta.nextRoute)