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

如何判断页面是pc端还是移动端,进入不同的页面的更多相关文章

  1. js判断页面在pc端打开还是移动端打开

    js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...

  2. PC端和手机访问调用不同的页面,JS和PHP不同方法

    js方法: var urlqr = location.href;    urlqr = urlqr.replace(/iphoneF_/, "pc")这里写正则替换页面地址 if( ...

  3. JS判断当前使用设备是pc端还是web端(转MirageFireFox)

    js判断当前设备 最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 站点 PC端url we ...

  4. PC端、移动端的页面适配及兼容处理

    转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...

  5. js控制媒体查询样式/判断是PC端还是移动端

    如果遇到,想要在pc端和移动端上的js效果显示不同的话,可以加上以下代码: var result = window.matchMedia('(max-width: 768px)'); if (resu ...

  6. JS判断android ios系统 PC端和移动端

    最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题! var browser ...

  7. PC端、移动端页面适配方案

    前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...

  8. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  9. 判断浏览器是pc端还是手机端

    1. 判断浏览器是pc端还是手机端 <script type="text/javascript"> var browser = { versions: function ...

随机推荐

  1. @WebFilter怎么控制多个filter的执行顺序

    转自:http://blog.csdn.net/liming_0820/article/details/53332070 之前我们控制多个filter的执行顺序是通过web.xml中控制filter的 ...

  2. Django Admin 专题

    Django admin Django强大的功能之一就是提供了Admin后台管理界面,简单配置就可以对数据库内容做管理 创建ModelAdmin并注册 from django.contrib impo ...

  3. Android 页面跳转之生命周期调用顺序问题

    Android Activity 常用技巧 Android Activity 启动模式和任务栈 Android 页面跳转之生命周期调用顺序问题 一.页面跳转逻辑分析 1.1 跳转逻辑分析 Androi ...

  4. i==1 && resolve()

    for( var i=100000 ; i>0 ; i-- ){ i==1 && resolve() } var dd = 988889;console.log(`${dd}`) ...

  5. Windows 系统里面的 hosts 文件

    一.什么是hosts文件? hosts文件是一个用于储存计算机网络中各节点信息的计算机文件.这个文件负责将主机名映射到相应的IP地址.hosts文件通常用于补充或取代网络中DNS的功能.和DNS不同的 ...

  6. Shell-6--预定义变量

  7. Liferay7 BPM门户开发之11: Activiti工作流程开发的一些统一规则和实现原理(完整版)

    注意:以下规则是我为了规范流程的处理过程,不是Activiti公司的官方规定. 1.流程启动需要设置启动者,在Demo程序中,“启动者变量”名统一设置为initUserId 启动时要做的: ident ...

  8. UIAutomatorViewer增加xpath查看

    原来的UIAutomatorViewer是没有xpath查看路径的,下载如下jar包: https://pan.baidu.com/s/1jpr6m0OOce7CtnDE_lIJ9A 密码:cja0 ...

  9. Xamarin.Android 使用 SQLite 出现 Index -1 requested, with a size of 10 异常

    异常: Android.Database.CursorIndexOutOfBoundsException: Index -1 requested, with a size of 10 此错误是数据返回 ...

  10. springboot + mybatis

    这两天启动了一个新项目因为项目组成员一直都使用的是mybatis,虽然个人比较喜欢jpa这种极简的模式,但是为了项目保持统一性技术选型还是定了 mybatis.到网上找了一下关于spring boot ...