vue实现PC端和移动端的界面切换

实现当在调试器点击这个手机模式切换之后再刷新页面，判断当前是pc端还是移动端跳转对应的页面路由

实现此效果的方式可以获取UA（userAgent）来判断

一、

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {window.location.href = "m/index.html"  //跳转到手机}else{window.location.href="";  //跳转到电脑}

此方法是根据UA信息判断是否是移动设备，来跳转对应页面

二、

if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {window.location.href = '/m_index.html#/'return}

这是第二种写法

跳转时也可以写this.$router.replace('/')

vue实现PC端和移动端的界面切换相关推荐

基于vue的UI框架集锦(移动端+pc端)
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档在线预览 2.vux 基于WeUI和Vu ...
基于SpringBoot+VUE（PC端+小程序端）的智能在线考试系统毕业设计
作者主页:编程千纸鹤作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享收藏点赞不迷路关注作者有好处 ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
vue项目区分打开的是pc端还是移动端
我是一个vue 项目 pc一套代码移动端一套代码 1.建立两个文件夹一个mobile 一个pc,在router里配置项目路径 2.新建一个js文件夹下列代码放入假设名字叫util export ...
vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
vue项目PC兼容移动端
做完的pc项目要求兼容移动端,常规操作的话是新做一个webapp后再来回跳转, 当前pc项目没有太多的交互和复杂的页面,所以决定在一个项目里进行兼容适配 1.新建两个组件,pc端页面组件,m端页面组件 ...
rem结合媒体查询适配的vue项目（PC端和移动端共用一套代码）
一.前言上周四接到了一个简单的纯前端网页的项目,我用了三天时间已经开发并且部署完毕(为了实现快速简易部署,使用了gitee pages进行部署,这篇文章记录我使用gitee pages部署的详细过程 ...
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十六)利用PC端和移动端BUG
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...

vue实现PC端和移动端的界面切换

vue实现PC端和移动端的界面切换相关推荐

最新文章

热门文章