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

Posted 2023-02-22

【中文标题】vue router - 在哪里存储路由名称？

【英文标题】：vue router - where to store route names?

【发布时间】：2019-02-20 10:00:08

【问题描述】：

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

这是我的问题：

重命名地狱：每当我更改路线的名称时，我都必须找到所有self.$router.replace( name: 'OldRouteName' ) 并更改它们。也许这听起来没什么大不了，但确实如此，尤其是在一个大项目中 全球警卫地狱：在某种程度上它与#1 相关，我依靠文本文字来分析from 和to 并调用我的next( name: 'RouteName', replace: true )

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

任何帮助表示赞赏，谢谢！

【参考方案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)