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. linux 下动态链接实现原理

    符号重定位 讲动态链接之前,得先说说符号重定位. c/c++ 程序的编译是以文件为单位进行的,因此每个 c/cpp 文件也叫作一个编译单元(translation unit), 源文件先是被编译成一个 ...

  2. IntelliJ Idea 授权服务器使用

    JetBrains授权服务器 1 http://intellij.mandroid.cn/ 支持的版本 IntelliJ IDEA 7.0 或更高ReSharper 3.1 或更高ReSharper ...

  3. 机器学习与Tensorflow(5)——循环神经网络、长短时记忆网络

    1.循环神经网络的标准模型 前馈神经网络能够用来建立数据之间的映射关系,但是不能用来分析过去信号的时间依赖关系,而且要求输入样本的长度固定 循环神经网络是一种在前馈神经网络中增加了分亏链接的神经网络, ...

  4. 调用 Https WebService 使用程序自动生成代理类

    1 商家提供的WebService接口:  https://ws.nciic.org.cn/nciic_ws/services/NciicServices?wsdl 2 在浏览器里打开这个地址,会显示 ...

  5. python之线程(threading)

    线程是属于进程的,一个进程可能包含多个线程 至于线程和进程在使用时哪个更好,只能看使用的场景了 话不多说,看下线程模块(threading)的使用方法: #导入模块 import threading, ...

  6. Python内置类型(5)--迭代器类型

    指能够被内置函数next调用并不断返回下一个值,直到最后抛出StopIteration错误表示无法继续返回下一个值的对象称为迭代器(Iterator) 其实以上的说法只是侠义上的迭代器的定义,在pyt ...

  7. Ubantu常用命令

    Ubantu常用命令 ctrl alt t   :打开终端 ctrl d : 关闭终端 F11   : 终端全屏,再按一次退出全屏 Super(即win)                        ...

  8. Maven_3 如何从Maven远程存储库下载

    如果在你的项目中,需要使用到的jar包. 如果使用build path的话,你把你的项目给别人运行的时候,别人还需要去build path,如果要换jar包的版本,这些都是比较麻烦的,所以我们使用ma ...

  9. JavaWeb学习 (十七)————JSP属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  10. [HNOI2018] 道路

    Description 给一棵二叉树,每个叶子节点 \(i\) 有三个属性 \(a_i,b_i,c_i\) 每个非叶子节点都能标记向左右儿子中的一条边(记作 \(x\) 边和 \(y\) 边) 设叶子 ...