Nuxt.js 中间件实现判断设备进行路由跳转

项目要求移动端和pc端在同一个项目中，要实现PC端地址放到移动端上，直接跳转到移动端页面。这是我的目录结构，欢迎大佬指点。。。方案一：在入口.vue文件中进行判断。缺点：只能在mounted中获取到设备信息，并且在这之间会执行其他页面的数据请求。layouts/default.vuemethods: {_isMobile() {let flag = navigator.userAgent.matc

ZhangbiaoAAAAA

3700人浏览 · 2021-09-18 16:52:57

ZhangbiaoAAAAA · 2021-09-18 16:52:57 发布

项目要求移动端和pc端在同一个项目中，要实现PC端地址放到移动端上，直接跳转到移动端页面。

这是我的目录结构，欢迎大佬指点。。。

方案一：在入口.vue文件中进行判断。

缺点：只能在mounted中获取到设备信息，并且在这之间会执行其他页面的数据请求。

layouts/default.vue

methods: {
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag;
    },
  },
  mounted() {
    const routes=this.$route.fullPath.replace('/mobile','');
    console.log(routes)  
    if (this._isMobile()) {
      this.$router.push("/mobile"+routes);
    } else {
      this.$router.push(routes);
    }
  }

直到我对middleware有所了解，想到可以在中间件中进行判断。

究极方案：

参考：Vue 2.x折腾记 - (12) Nuxt.js写一个校验访问浏览器设备类型及环境的中间件_CRPER-CSDN博客

（主要代码都在这里↑↑↑↑↑↑↑↑↑↑）

1、utils/deviceType.js（用来判断设备）

// 这里的判断类型是自己整理的,覆盖面只涵盖我工作领域的
// 可以按需追加

/**
 *
 * @param {*} UA ,就是userAgent
 * @returns  type: 设备类型
 *           env: 访问环境(微信/微博/qq)
 *           masklayer: 就是给外部拿到判断是否显示遮罩层的,一些特殊环境要引导用户到外部去打开访问
 */

 function isWechat(UA) {
    return /MicroMessenger/i.test(UA) ? true : false;
  }
  
  function isWeibo(UA) {
    return /Weibo/i.test(UA) ? true : false;
  }
  
  function isQQ(UA) {
    return /QQ/i.test(UA) ? true : false;
  }
  
  function isMoible(UA) {
    return /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA)
      ? true
      : false;
  }
  
  function isIOS(UA) {
    return /iPhone|iPad|iPod/i.test(UA) ? true : false;
  }
  
  function isAndroid(UA) {
    return /Android/i.test(UA) ? true : false;
  }
  
  export function deviceType(UA) {
    if (isMoible(UA)) {
      if (isIOS(UA)) {
        if (isWechat(UA)) {
          return {
            type: "ios",
            env: "wechat",
            masklayer: true,
          };
        }
        if (isWeibo(UA)) {
          return {
            type: "ios",
            env: "weibo",
            masklayer: true,
          };
        }
        if (isQQ(UA)) {
          return {
            type: "ios",
            env: "qq",
            masklayer: true,
          };
        }
        return {
          type: "ios",
        };
      }
      if (isAndroid(UA)) {
        if (isWechat(UA)) {
          return {
            type: "android",
            env: "wechat",
            masklayer: true,
          };
        }
        if (isWeibo(UA)) {
          return {
            type: "android",
            env: "weibo",
            masklayer: true,
          };
        }
        if (isQQ(UA)) {
          return {
            type: "android",
            env: "qq",
            masklayer: true,
          };
        }
        return {
          type: "android",
        };
      }
  
      return {
        type: "mobile",
      };
    } else {
      return {
        type: "pc",
      };
    }
  }

2、middleware/device.js

判断设备后跳转有问题，大家斟酌

API: 上下文对象 - NuxtJS | Nuxt.js 中文网 context对象说明

// @ts-nocheck
import { deviceType } from "~/utils/deviceType";
export default function(context) {
  // @ts-ignore
  context.userAgent = process.server
    ? context.req.headers["user-agent"]
    : navigator.userAgent;
  context.deviceType = deviceType(context.userAgent);
  const routes=context.route.fullPath.replace('/mobile','');
  // 比如我的路由为 http://192.168.0.120:8090/product?type=1
  // routes就是 '/product?type=1' 
  console.log(routes)
  const ishasM=context.route.fullPath.indexOf("mobile") != -1
  console.log('当前路由是否为移动端'+ishasM)
  if(process.client){//客户端←这个判断贼重要
    if (context.deviceType.type === "pc") {//设备为pc
      if(ishasM){//当前路由为移动端路由
        console.log('设备：pc；路由：移动端；跳转：pc')
        console.log('跳转至：'+routes)
         return context.redirect(302,{path:routes});
         //return context.app.router.push({path:routes})   ←这样写会出现问题，具体原因不清楚
        
      }else{
        console.log('设备：pc；路由：pc；跳转：pc')
        console.log('不用跳转')
        return 
      }
    }else{//当前为移动端
      if(ishasM){
        console.log('设备：手机；路由：移动端；跳转：移动端')
        console.log('不用跳转')
        return 
      }else{
        console.log('设备：手机；路由：pc；跳转：手机')
        console.log('跳转至：'+"/mobile"+routes)
        //return context.app.router.push({path:"/mobile"+routes});←这样写会出现问题，具体原因不清楚
        //return context.redirect(302,{path:routes});
      }
    }
  }
}

3、最后，在nuxt.config.js下使用中间件：

router: {
  middleware: 'device'
},

至此结束。

欢迎大佬批评指教。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^