动态更新Vue路由参数[重复]

Question

我有一个多语言的 Vue (Nuxt) 应用程序。基于我在 URL 中设置选定的语言/区域设置，例如http://www.example.net/sv-SE/somepage.

路由使用可选的 iso 代码注册：/:iso_code([a-z]{2}-[A-Z]{2})?/somepage。这一切都按预期工作。

现在我的问题是：我有一个语言下拉菜单，用户可以在其中设置所需的语言。有什么方法可以更新上面的路由参数iso_code，而不诉诸history.replaceState？

我尝试了路由器 API，但没有成功。网址没有更新，即如果网址是http://www.example.net/sv-SE/somepage，则运行代码时sv-SE不会被en-US替换：

this.$router.replace({ path: this.$route.fullPath, params: { iso_code: 'en-US' } })

Answer 1

要使用params 对象推送路由，您应该使用named route：

const routes = [
  {
    path: '/:iso_code([a-z]{2}-[A-Z]{2})?/somepage',
    name: 'somepage',
    //...
  }
]
export default new VueRouter({ routes })

然后，您将$router.push 路线的name 以及params：

^App.vue:

<template>
  <div>
    <router-link :to="{ name: 'somepage', params: { iso_code: 'sv-SE' }}">sv-SE</router-link>

    <button @click="$router.push({ name: 'somepage', params: { iso_code: 'es-SP' }})">es-SP</button>
  </div>
</template>

demo of named route

此外，您可以通过仅推送params 对象（即，没有path 或name）来更新当前路由的params。例如，假设path/name 已经在正确的路由上接收iso_code 参数，你可以$router.push({ params: { iso_code: 'es-SP' }})：

^{SomePage.vue:}

<template>
  <div>
    <div>{{ iso_code }}</div>
    <button @click="$router.push({ params: { iso_code: 'es-SP' }})">es-SP</button>
  </div>
</template>

demo of params update for current route

---

如果您不想使用命名路由，则必须推送完全解析的路径（例如，/sv-SE/somepage）而不是params：

this.$router.push('/sv-SE/somepage')

这种情况下的缺点是，如果您决定更改路径，则必须更新此参考。