nuxtjs切换语言会发生路由跳转

是的，您说得对。在使用 nuxt + vue-i18n 进行多语言开发时，切换语言会发生路由跳转的问题，这是由于 nuxt 的 i18n 核心机制导致的。

解决这个问题的方法有两种：

1. 使用 nuxt-link 组件进行路由跳转

在使用 nuxt-link 组件时，nuxt 会自动将当前语言设置为链接中指定的语言。例如：

<nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
<nuxt-link :to="switchLocalePath('zh')">中文</nuxt-link>

这样，切换语言时就不会发生路由跳转了。

2. 使用 $i18n.setLocale 方法手动设置语言

在组件中使用 $i18n.setLocale 方法手动设置语言，例如：

methods: {
  switchLang(lang) {
    this.$i18n.setLocale(lang)
  }
}

但是使用这种方式切换语言时会发生路由跳转，因此需要手动进行路由跳转。

以上是我为您提供的关于 nuxt + vue-i18n 切换语言会发生路由跳转的踩坑记录。如果您有其他问题，可以随时向我提问。

相关问题

nuxt3 如何禁止跳转某个路由 包括这个路由的子级路由

在 Nuxt.js 中禁止跳转某个路由，可以通过路由守卫（`beforeRouteEnter`或`beforeRouteUpdate`）来实现。具体操作如下：

1. 在 `nuxt.config.js` 中配置路由选项：

export default {
  // 路由配置
  router: {
    // 中间件
    middleware: 'checkRoute'
  }
}

2. 在 `middleware` 目录下创建 `checkRoute.js` 文件，并编写中间件：

export default function ({ route, redirect }) {
  // 如果路由名是 'forbidden' 或者 'forbidden/xxx'，则跳转到首页
  if (route.name === 'forbidden' || route.name.startsWith('forbidden/')) {
    return redirect('/')
  }
}

3. 在需要禁止跳转的路由组件中添加路由守卫：

export default {
  name: 'Forbidden',
  beforeRouteEnter (to, from, next) {
    // 如果访问当前路由或者当前路由的子级路由，则跳转到首页
    if (to.name === 'forbidden' || to.name.startsWith('forbidden/')) {
      next('/')
    } else {
      next()
    }
  }
}

通过以上步骤即可禁止跳转某个路由，包括这个路由的子级路由。需要注意的是，在使用 `next` 方法时，如果传入参数，则会进行跳转；如果不传入参数，则不会进行跳转。

nuxt3 路由跳转

Nuxt.js是一个基于Vue.js的通用应框架，它提供了一种简单且强大的方式来创建服务端渲染的Vue.js应用。在Nuxt.js中，路由跳转可以通过以下几种方式实现：

1. 使用`<nuxt-link>`组件：`<nuxt-link>`是Nuxt.js提供的路由链接组件，它可以自动处理路由跳转，并生成正确的URL。你可以在模板中使用`<nuxt-link>`来创建跳转链接，例如：

<nuxt-link to="/about">About</nuxt-link>

这将会生成一个指向`/about`路径的链接。

2. 使用`this.$router`对象：在Vue组件中，你可以通过`this.$router`对象来进行编程式的路由跳转。例如，你可以使用`this.$router.push()`方法来跳转到指定的路由，示例代码如下：

this.$router.push('/about')

这将会导航到`/about`路径。

3. 使用`<nuxt-link>`的`to`属性：除了直接使用字符串路径，你还可以使用对象形式的路径来进行路由跳转。例如，你可以通过指定`name`属性来跳转到具有命名路由的页面，示例代码如下：

<nuxt-link :to="{ name: 'about' }">About</nuxt-link>

这将会生成一个指向命名为`about`的路由的链接。