如何判断页面是pc端还是移动端,进入不同的页面
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端还是移动端,进入不同的页面的更多相关文章
- js判断页面在pc端打开还是移动端打开
js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...
- PC端和手机访问调用不同的页面,JS和PHP不同方法
js方法: var urlqr = location.href; urlqr = urlqr.replace(/iphoneF_/, "pc")这里写正则替换页面地址 if( ...
- JS判断当前使用设备是pc端还是web端(转MirageFireFox)
js判断当前设备 最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 站点 PC端url we ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
- js控制媒体查询样式/判断是PC端还是移动端
如果遇到,想要在pc端和移动端上的js效果显示不同的话,可以加上以下代码: var result = window.matchMedia('(max-width: 768px)'); if (resu ...
- JS判断android ios系统 PC端和移动端
最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题! var browser ...
- PC端、移动端页面适配方案
前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- 判断浏览器是pc端还是手机端
1. 判断浏览器是pc端还是手机端 <script type="text/javascript"> var browser = { versions: function ...
随机推荐
- Latex一次添加两个图(并列),半栏
\begin{figure}[t] \centering \includegraphics[width=0.9\columnwidth, clip=true, trim=0 0 0 32]{figur ...
- HTML中的文本标签
<span></span> 请使用 <span> 来组合行内元素,以便通过样式来格式化它们. 注释:span 没有固定的格式表现.当对它应用样式时,它才会产生视觉上 ...
- C++随机数引擎
C++的随机数引擎有以下几个要点需要注意: 1.随机数发生器使用同一种子会生成相同序列的随机数序列 2.为了让程序每次运行都会生成不同的随机结果,我们可以使用 time(0) 产生一个随机数种子 3 ...
- linux中环境变量PATH设置错误,导致ls cd 等命令不能使用,提示:没有那个文件或目录
在CentOS7中执行了 PATH=/opt/:$PATH 然后执行ls时,出现 ls-bash: ls: 没有那个文件或目录 试了试其他命令也一样无法使用 后来执行 : export PATH=/u ...
- 2D转换与3D转换的区别
2D与3D的区别——2D 转换元素能够改变元素 x 和 y 轴.3D 转换元素还能改变其 Z 轴.
- 什么是Spring Boot?
什么是Spring Boot? Spring Boot是Spring开源组织下的子项目,是Spring组件一站式解决方案,主要是简化了使用Spring的难度,简省了繁重的配置,提供了各种启动器,开发者 ...
- .NET手记-为ASP.NET MVC程序集成Autofac
MVC Autofac总是会紧跟最新版本的ASP.NET MVC框架,所以文档也会一直保持更新.一般来讲,不同版本的框架集成Autofac的方法一般不变. MVC集成需要引用 Autofac.Mvc5 ...
- Hybrid App 原理解析
目录 一.现有混合方案 二.Hybrid技术原理 三.Native 通知 H5 (Native 调用 JS) 3.1 Android 调 H5 3.2 iOS 调 H5 四.H5 通知 Native( ...
- C# TableLayoutPanel使用方法
一.利用TableLayoutPanel类展示表格,以10行5列为例 第1步:在前台创建一个panel,使TableLayoutPanel对象填充其内部. 第2步:创建TableLayoutPanel ...
- 《Kubernetes权威指南》——网络原理
1 Kubernetes网络模型 基本原则:每个Pod都拥有一个独立IP,而且假定所有Pod都在一个可以直接连通的.扁平的网络空间中. 基于基本原则,用户不需要额外考虑如何建立Pod之间的连接,也不需 ...