使用全局语言参数构建 router-link

Question

我有一组看起来像这样的路线，其中语言是可选的。如果未设置，它将默认为英语：

/搜索
/nl/search/
/de/search/

现在我想生成带有 router-link 元素的路线。

<router-link :to="{ 
    name: 'search-map', 
    params: { language: $language }
}">
    testlink
</router-link>

这行得通，但我已经在 Vue 中全局设置了语言。显然，我不想一直在 router-link 上传递参数，而是自动完成。

我试过使用导航守卫，但这似乎不起作用：

router.beforeEach((to, from, next) => {
    to.params.language = Vue.prototype.$language;
    next();
});

有没有其他方法可以完成此操作，这样我就不必在每个 router-link 上指定语言参数？还是导航守卫应该工作？

Answer 1

如果to不包含参数language怎么办，在next()

中添加

router.beforeEach((to, from, next) => {
  if (!to.params.hasOwnProperty('language')) {
    next({
      ...to,
      params: {
        ...to.params,
        language: Vue.prototype.$language
      }
    })
  } else {
    next()
  }
})

使用全局语言参数构建 router-link

Build router-link with global language parameter

vue.js

vue-router

vuejs2