How to judge whether the page is pc or mobile and enter different pages

Keywords: Javascript Mobile Vue Android Windows

vue judges whether pc or mobile end enters different pages respectively

The mobile terminal code is determined as follows:

function IsPC(){  
    var userAgentInfo = navigator.userAgent;
    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
    var flag = true;  
        for (var v = 0; v < Agents.length; v++) {  
            if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
                }  
            return flag;  
        }
    var routerFlag = IsPC();
    sessionStorage.setItem('flag',routerFlag);

Route to pc or mobile

Determine the route code as follows:

var flagRouter = JSON.parse(sessionStorage.getItem('flag'));
var routers = [];
if (!flagRouter) {
    routers = [
        {
            path: '/',
            redirect: '/ui/login'
        },
        {
            path: '/ui/login',
            name: 'mobileLogin',
            component: mobileLogin
        },
        {
            path: '/ui/index',
            name: 'mobileIndex',
            component: mobileIndex,
            meta: {
                requireAuth: true  // Add this field to indicate that you need to log in to enter this route
            },
        }
    ]
} else {
    routers = [
        {
          path: '/',
          redirect: '/ui/login'
        },
        {
          path: '/ui/login',
          name: 'login',
          component: login
        },
        {
          path: '/ui/index',
          name: 'index',
          component: index,
          meta: {
            requireAuth: true  // Add this field to indicate that you need to log in to enter this route
          },
          children: [
            {
              path: '/ui/totalfloor',
              name: 'totalfloor',
              component: totalfloor,
              meta: {
                requireAuth: true  // Add this field to indicate that you need to log in to enter this route
              },
            },
            {
              path: '/ui/pointsfloor',
              name: 'pointsfloor',
              component: pointsfloor,
              meta: {
                requireAuth: true  // Add this field to indicate that you need to log in to enter this route
              },
            },    
      ]
}

Judge by user agent value, and use the user agent attribute of Navigator object in javascript framework

There are other methods that can be changed according to individual projects. Only individual study notes. I hope they can help you

O(∩_∩)O

Posted by neuro4848 on Fri, 06 Dec 2019 16:02:03 -0800