vue 项目 切换手机端和pc端。同一个项目,配置不同的路由
1, 首先判断设备:在main.js里面写
// vue原型挂载 - 是否PC端
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
Vue.prototype.$pc = false
hostConfig.vconsole && new VConsole()
} else {
Vue.prototype.$pc = true
let winWidth = document.documentElement.offsetWidth ||
document.body.offsetWidth
winWidth = winWidth < 1366 ? 1366 : winWidth
let oHtml = document.getElementsByTagName('html')[0]
oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'
window.addEventListener('resize', function () {
let winWidth = document.documentElement.offsetWidth || document.body.offsetWidth
winWidth = winWidth < 1366 ? 1366 : winWidth
let oHtml = document.getElementsByTagName('html')[0]
oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'
})
}
2, 在app.vue里面
watch: {
$route: function (to, from) {
if (to.name.indexOf('_p') > 0 && !this.$pc) {
this.$router.replace(to.name.split('_p')[0])
} else if (to.name.indexOf('_p') < 0 && this.$pc) {
this.$router.replace(to.name + '_p')
}
}
},
3,路由表配置
{
path: '/index',
name: 'index',
component: resolve => require(['../views/Index/index.vue'], resolve)
},
{
path: '/index_p',
name: 'index_p',
component: resolve => require(['../views/Index_p/index.vue'], resolve)
},
4, 打完收工
vue 项目 切换手机端和pc端。同一个项目,配置不同的路由的更多相关文章
- PHP项目实现手机端和PC端的页面切换
目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...
- PHP判断是手机端还是PC端
function check_wap() { if (isset($_SERVER['HTTP_VIA'])) return true; if (isset($_SERVER['HTTP_X_NOKI ...
- CSS3及JS简单实现选项卡效果(适配手机端和pc端)
想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...
- 腾讯首页分辨手机端与pc端代码
腾讯首页分辨手机端与pc端代码 自己在做网页的时候在腾讯网首页借鉴的代码. 代码: <!-- 移动适配JS脚本 --> <script type="text/javascr ...
- vue-判断设备是手机端还是pc端
经常在项目中会有支持 pc 与手机端需求.并且pc与手机端是两个不一样的页面.这时就要求判断设置,根据不同的设置跳转不同的路由. [代码演示] 在 router/index.js 中有两个页面. ex ...
- 获取网页是手机端还是PC端访问
C#方式: /// <summary> /// 是否手机访问 /// </summary> /// <returns></returns> public ...
- php 判断是否手机端还是pc端
来自:https://www.cnblogs.com/webenh/p/5621890.html 用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到PC ...
- 【转】自动识别是手机端还是pc端只用一行代码就搞定
<script type="text/javascript"> var mobileAgent = new Array("iphone", &quo ...
- js判断客户端是手机端还是PC端
封装函数: function isPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...
随机推荐
- SpringMVC学习(五)——拦截器示例
部分内容摘自开涛的<跟我学SpringMVC.PDF> 拦截器,本质类似于AOP,主要的应用场景: 1.日志记录:记录请求信息的日志,以便进行信息监控.信息统计.计算PV等. 2.权限检查 ...
- lodash常用函数 - Array、Collection
lodash常用函数 - Array.Collection lodash版本 v3.10.1 1.Array.Collection pull 移除数组中满足条件的元素 var array = [1, ...
- pt-duplicate-key-checker使用
pt-duplicate-key-checker工具可以检测表中重复的索引,对于一些业务量很大的表,而且开发不规范的情况下有用.基本用法: 看一下我们的测试表: mysql> desc new_ ...
- 解决因 RsFX devicer 而无法卸载 SQL Server 的问题
到卸载 SQL Server 2008 R2 安装程序支持文件时,遇到了问题:“警告 26003.无法卸载 Microsoft SQL Server 2008 R2 安装程序支持文件,因为安装了以下产 ...
- lua学习笔记之userdata
这一段时间看了<programming in lua>中的第28章,看一遍并不是很难,但是只是朦胧的感觉,雾里看花,水中望月.最终还是决定敲出来自己看看,练练手,结果受益不少,也遇到了一些 ...
- 021logging模块
##importlogging logging.debug('debug message')logging.info('info message')logging.warning('warning ...
- 事件总线(Event Bus)
事件总线(Event Bus)知多少 源码路径:Github-EventBus简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对 ...
- (转)C++ 自由存储区是否等价于堆?
“free store” VS “heap” 当我问你C++的内存布局时,你大概会回答: “在C++中,内存区分为5个区,分别是堆.栈.自由存储区.全局/静态存储区.常量存储区”. 如果我接着问你 ...
- D3——散点图Scatterplot
散点图 //Width and height ; ; ; var dataset = [ [, ], [, ], [, ], [, ], [, ], [, ], [, ], [, ], [, ], [ ...
- PHP-------文件上传的实例
文件上传的实例 一.上传头像 在注册时,要求用户上传头像,登陆主页面,显示用户信息时,头像也要显示出来. 例子: 注册页面: 图片存数据库时是text类型. <title>无标题文档< ...