Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Blessed by Buddha, there is no bug. Hello everyone! I am across the sea!

Sometimes we support PC and mobile requirements in our projects. And PC and mobile terminal are two different pages. At this time, it is required to judge the Settings and jump to different routes according to different Settings.

Go straight to code

Go straight to code

// There are two pages in router/index.js.
export default new Router({
    mode: 'history'.routes: [{path: ' '.redirect: '/pc_index'
    },
    {
        path: "/pc_index".// On the PC
        name: PcIndex,
        component: PcIndex
    },
    {
        path: '/m_index'.// The home page of the mobile phone
        name: MIndex,
        component: MIndex
    }
    ]
});
Copy the code

App.vue mounted = app. vue mounted = app. vue mounted

// APP.vue.data() {
    return {
        isPC: false.// true: PC device. False: mobile device
    };
},
mounted() {
    let isPC = localStorage.getItem('isPC');
    console.log(isPC);
    // Only isPC is null, undefined, 0! IsPC to true
    // typeof isPC! = undefined excludes undefined
    // exp! =0 excludes the digits zero and false.
    // Check whether isPC is null
    if(! isPC &&typeofisPC! ="undefined"&& isPC! =0) {if(!this.firstLoad){
            if (this._isMobile()) {
                console.log("Mobile");
                this.isPC = false;
                this.$router.push({ path: '/m_index'});
            } else {
                console.log("PC");
                this.isPC = true;this.$router.push({ path: '/pc_index'});
            }
            localStorage.setItem('isPC'.this.isPC); }}},...Copy the code

_isMobile() :

// App.vue
// The format of the device is determined by the regular expression. It can be used to determine the format of most devices in the market
_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;
}
Copy the code

Results the following

Refresh chrome in PC mode. The following information is displayed:

Refresh chrome in Mobile mode. The following information is displayed:

Wrap up

An error that does not affect functionality is reported at this point

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/pc_index".

Vue repeatedly clicks the same route

The method of elimination is as follows:

// Add the following code to router/index.js

import VueRouter from "vue-router";

/** * There is an error that does not affect the function * Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location */

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err= >err); }; .Copy the code