Nuxt爬坑更新- 判断设备进行跳转手机端

nuxt是没有index.html页面的, 我们应该在哪里写js代码来判断设备呢, 下面请看个人代码吧

1. 引入middleware中间件

• 在nuxt.config.js里经过router来引入middleware中间件

nuxt.config.js代码以下

export default {
    router: {
        middleware: ["device"],
    },
}
复制代码

2. 在根目录新建utils文件而且新建文件deviceType.js

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",
        };
    }
}
复制代码

3. 在middleware里添加device.js文件

device.js代码以下

// @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);
    // 这里注入到store,是由于我部分页面须要判断机型请求不一样的数据,
    // 大家没有用到的话能够移除
    // context.store.commit("SetDeviceType", context.deviceType);
    // 如果判断UA非移动端的,就在这里作处理了..
    // context.redirect(status,url) 这个能够重定向到外部网站
    // 如果内部访问能够直接用router对象push
    if (context.deviceType.type === "pc") {
        // context.redirect(302,'www.huanjingwuyou.com')    //301是永久重定向，若是你想随着设备类型改变一直变，请改成302
    } else {
        context.redirect(302,'m.huanjingwuyou.com')    //301是永久重定向，若是你想随着设备类型改变一直变，请改成302
    }
}
复制代码

4. 关于nuxt的基础文档请点一下连接

• nuxt爬坑