nuxt 判断是pc端和移动端跳转路由

在 Nuxt.js 中，我们可以使用插件判断是 PC 端还是移动端，然后根据不同的设备跳转到不同的路由。

下面的代码演示了如何编写一个插件来实现这个功能：

// plugins/device.js

export default ({ app }, inject) => {
  const userAgent = process.server
    ? app.$ua.get('User-Agent')
    : navigator.userAgent

  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    userAgent
  )

  inject('device', {
    isMobile,
    redirect(path) {
      const url = isMobile ? `/m${path}` : path
      if (process.client) {
        window.location.href = url
      } else {
        app.context.redirect(url)
      }
    }
  })
}

在插件中，我们首先获取了用户代理（userAgent），然后使用正则表达式来判断是否是移动设备。如果是移动设备，我们就将路径前缀设置为 "/m"，否则就保持原样。

接着，我们定义了一个名为 "redirect" 的方法，用于根据设备类型跳转路由。如果在客户端中调用该方法，我们就直接跳转到指定的 URL；如果在服务器端中调用该方法，我们就使用上下文对象（context）的 redirect 方法来跳转路由。

最后，我们将插件作为 Nuxt.js 的插件进行注册：

// nuxt.config.js

export default {
  plugins: ['~/plugins/device.js']
}

现在，我们就可以在页面中使用该插件了。例如，我们可以编写一个页面组件来测试：

<!-- pages/index.vue -->

<template>
  <div>
    <h1>首页</h1>
    <button @click="goToAbout">跳转到关于页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$device.redirect('/about')
    }
  }
}
</script>

在上面的代码中，我们定义了一个按钮，当用户点击该按钮时，就会调用 $device.redirect 方法来跳转到 "/about" 路由。如果是在移动设备上访问，就会跳转到 "/m/about" 路由。