欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何判断页面是pc端还是移动端,进入不同的页面

程序员文章站 2022-03-22 13:14:04
vue判断是pc端还是移动端分别进入不同的页面 判断移动端代码如下: 路由判断分别进入pc还是移动端 判断路由代码如下: 通过user-agent值,来进行判断,使用javascript框架中的Navigator对象的userAgent属性 还有些其他方法可以根据个人项目是改动,仅个人学习笔记,希望 ......

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