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. MVC笔记之一:MVC编程模型

    MVC是ASPX.NET用于构造Web应用的一种框架,和传统的ASPX.NET开发模式(Web Form)在架构上相同,同样采用三层框架实现,但相比传输开的模式,各层架构更加规范. 传统三层架构: V ...

  2. Spring集合注入

    1.集合注入 上一篇博客讲了spring得属性注入,通过value属性来配置基本数据类型,通过<property>标签的 ref 属性来配置对象的引用.如果想注入多个数据,那我们就要用到集 ...

  3. Vue 父组件ajax异步更新数据,子组件props获取不到

    转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...

  4. Android Bitmap操作问题之Canvas: trying to use a recycled bitmap

    一.Bitmap.recycle 方法被弃用 在Android中,Bitmap的存储分为两部分,一部分是Bitmap的数据,一部分是Bitmap的引用.在Android2.3时代,Bitmap的引用是 ...

  5. API接口设计:防参数篡改+防二次请求

    API接口由于需要供第三方服务调用,所以必须暴露到外网,并提供了具体请求地址和请求参数 为了防止被第别有用心之人获取到真实请求参数后再次发起请求获取信息,需要采取很多安全机制 1.首先: 需要采用ht ...

  6. Docker - 国内镜像的配置及使用

    Docker国内镜像 DaoCloud - Docker加速器 阿里云 - 开发者平台 微镜像 - 希云cSphere 网易蜂巢 阿里云的Docker加速器 阿里云 - 开发者平台:https://d ...

  7. MessageBeep - Play a System sound

    There is a interesting function which can play a System sound. First let's see the WinAPI. //声明: Mes ...

  8. .net core使用NLog+Elasticsearch记录日志

    在微服务或分布式系统中,如果将日志作为文件输出,查看系统日志将非常不便:如果将日志保存到数据库中,又不能进行全文搜索.在这里我们将日志输出到ElasticSearch中,借助Kibana再查找日志. ...

  9. 关于爬虫中常见的两个网页解析工具的分析 —— lxml / xpath 与 bs4 / BeautifulSoup

    http://www.cnblogs.com/binye-typing/p/6656595.html 读者可能会奇怪我标题怎么理成这个鬼样子,主要是单单写 lxml 与 bs4 这两个 py 模块名可 ...

  10. salesforce lightning零基础学习(六)Lightning Data Service(LDS)

    本篇可参看:https://trailhead.salesforce.com/modules/lightning_data_service Lightning中针对object的detail页面,一个 ...