Question

我有一个多语言Vue（Nuxt）应用程序。基于此，我要在网址中设置所选的语言/区域设置，例如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对象（即，没有params或path）来更新当前路线的name。例如，假设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')

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

动态更新Vue路线参数

1 个答案: