如何判斷頁面是pc端還是移動端，進入不同的頁面

vaelcy發表於2019-01-20

vue判斷是pc端還是移動端分別進入不同的頁面

判斷移動端程式碼如下：

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);

路由判斷分別進入pc還是移動端

判斷路由程式碼如下：

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  // 新增該欄位，表示進入這個路由是需要登入的
            },
        }
    ]
} else {
    routers = [
        {
          path: `/`,
          redirect: `/ui/login`
        },
        {
          path: `/ui/login`,
          name: `login`,
          component: login
        },
        {
          path: `/ui/index`,
          name: `index`,
          component: index,
          meta: {
            requireAuth: true  // 新增該欄位，表示進入這個路由是需要登入的
          },
          children: [
            {
              path: `/ui/totalfloor`,
              name: `totalfloor`,
              component: totalfloor,
              meta: {
                requireAuth: true  // 新增該欄位，表示進入這個路由是需要登入的
              },
            },
            {
              path: `/ui/pointsfloor`,
              name: `pointsfloor`,
              component: pointsfloor,
              meta: {
                requireAuth: true  // 新增該欄位，表示進入這個路由是需要登入的
              },
            },    
      ]
}

通過user-agent值，來進行判斷，使用javascript框架中的Navigator物件的userAgent屬性

還有些其他方法可以根據個人專案是改動，僅個人學習筆記，希望對大家也有所幫助

O(∩_∩)O

相關文章