如何判断页面是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 ...
随机推荐
- QQ网页弹窗
QQ网页弹窗 1.网址:http://shang.qq.com/v3/index.html 2.选推广工具,提示语随便写 3.建一个html 网页,并把代码拷进去. 4.双击网页,就可以打开了.(用E ...
- ubuntu16.04安装maven
一.下载maven apache maven官网地址:http://maven.apache.org/download.cgi 找到Link列下的“apache-maven-3.5.2-bin.tar ...
- OSLab多线程
日期:2019/3/26 内容:多线程. 一.基本知识 线程的定义 线程(thread)是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单 ...
- C++数组,sort
cmake_minimum_required(VERSION 3.5) project(Test) add_executable( te test.cpp ) test.cpp #include &l ...
- APK防护——Anti_Virtual App的思路和实现
作者:HAI_i 原文来自:https://bbs.ichunqiu.com/thread-42982-1-1.html 0×00 前言 Virtual App是一个很强大的存在,破坏了Android ...
- spring框架学习笔记2:配置详解
简单写一个类做示例: package bean; public class User { private String name; private Integer age; public String ...
- location-alias
location /images/ { alias /project/pic/; } 给定的路径对应于location的"/url" 这个URL; /images/f.jpg -- ...
- H264三种码率控制方法(CBR, VBR, CVBR)
CBR(Constant Bit Rate)是以恒定比特率方式进行编码,有Motion发生时,由于码率恒定,只能通过增大QP来减少码字大小,图像质量变差,当场景静止时,图像质量又变好,因此图像质量不稳 ...
- Maven - 实例-6-聚合与继承
创建项目 xxx - 继承自testDep.PPP <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= ...
- [EXP]Memu Play 6.0.7 - Privilege Escalation
# Exploit Title: Memu Play - Privilege Escalation (PoC) # Date: // # Author: Alejandra Sánchez # Ven ...