preface

This requirement is very common, sometimes the shared page is accessed on mobile phone, sometimes others are opened on PC;

If not sharing the same page, you need to block the jump;

Of course, you can share the same page (enlargement to PC also need to add some CSS, also need to determine the device).

Train of thought

The UA is essentially checked again, only this time it is retrieved from the REQ, not from the client

The client processing posture

  • getwindow.navigator.userAgent
  • Write a judgment JS, match, and return the corresponding type
  • Once we get the type we can think about whether to jump or do some behavior processing

Processing posture of the server

It’s basically the same idea as above, but we can do it earlier

Don’t wait until the client page is rendered, and then to judge, and then do processing

The user experience will be much better

So we can get the logic straight and start writing

Talk about the Nuxt life cycle

Nuxt.js is a Vue server rendering framework, similar to the React server rendering framework Next.

The version we are using here is V1.4.2 (the default initialization version is Express based),

Let’s look at the official Nuxt implementation lifecycle process

There are several stages before render, and the generic global configuration is all in the Middleware stage

So why don’t you do something with nuxtServerInit, because you can only trigger store actions

Code implementation

This assumes that you have read the official documentation in general and know everything about the directory structure!

DeviceType. Js (utils directory)

// The type of judgment here is self-collated, covering only my field of work
// Can be appended as needed

/** ** @param {*} UA, which is userAgent * @returns type: device type * env: access environment (wechat/weibo/QQ) * masklayer: For external access to determine whether to display the mask layer, some special circumstances to direct the user to external access to open */

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"}; }}Copy the code

Device. Js (middleware directory)

// @ts-nocheck
import { deviceType } from "~/utils/deviceType";
export default function(context) {
  // @ts-ignore
  context.userAgent = process.server
    ? context.req.headers["user-agent"]
    : navigator.userAgent;
  // Add an attribute to the global context to hold the matching information we return
  context.deviceType = deviceType(context.userAgent);
  // This is injected into store because some of my pages need to determine whether the model requests different data.
  // You can remove it if you are not using it
  context.store.commit("SetDeviceType", context.deviceType);

  // If the UA is not mobile, the processing is done here..
  // context.redirect(status, URL) This can be redirected to external websites
  // For internal access, the router object push can be used directly
  if (context.deviceType.type === "pc") {
    // context.redirect(301,'https://wwww.baidu.com')}}Copy the code

nuxt.config.js

This functionality is site-wide and is injected globally, so pages are executed by default

Injecting middleware into the router takes effect globally


module.exports = {
  router: {
    middleware: ["device"],}};Copy the code

conclusion

At this point, normal development has been basically satisfied

There are wrong or better implementation please leave a message, will be timely correction, thank you for reading.