需求分析：有些網站是電腦端一個網站，手機端一個網站，如何判斷設備類型來讓他跳轉到相應的頁面呢？
1.首先在util中新建一個deviceType.js，util一般在項目的根目錄下，即和pages,static等一個層級，沒有則自己新建，然后呢，util的文件夾下一般存放的是公用的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，寫入以下內容
// @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(301,'https://wwww.baidu.com')? ? //301是永久重定向，如果你想隨著設備類型改變一直變，請改為302
? }
}
3.在nuxt.config.js中寫入路由跳轉時就執行中間件檢查設備，即可完成啦
module.exports = {
? router: {
? ? middleware: ["device"],
? },
};
