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", ...
随机推荐
- redis 在linux安装
转自:http://futeng.iteye.com/blog/2071867 下载 官网下载 安装 tar zxvf redis-2.8.9.tar.gz cd redis-2.8.9 #直接mak ...
- Hyper-V迁移---委派
在Hyper-V管理器中-实时迁移,选择“使用kerberos",如图1所示 在AD中,找到Hyper-V宿主,分别设置委派,如图2所示 图1 图2
- MSSQL注入常用SQL语句整理
很多情况下使用工具对mssql注入并不完善,所以我们就需要手工注入,一下是本人收集的一些mssql的sql语句. 手工MSSQL注入常用SQL语句 and exists (select * from ...
- Codeforces Round #434 (Div. 2)【A、B、C、D】
Codeforces Round #434 (Div. 2) codeforces 858A. k-rounding[水] 题意:已知n和k,求n的最小倍数x,要求x后缀至少有k个0. 题解:答案就是 ...
- 51nod 1515 明辨是非 [并查集+set]
今天cb巨巨突然拿题来问,感觉惊讶又开心,希望他早日康复!!坚持学acm!加油! 题目链接:51nod 1515 明辨是非 [并查集] 1515 明辨是非 题目来源: 原创 基准时间限制:1 秒 空间 ...
- Spring Framework5.0 学习(2)-- Quick Start
官网:https://projects.spring.io/spring-framework/ Spring Framework 5.x 要求 JDK 1.8以上 1.0 在(1)的基础上,给bu ...
- Oracle表空间、段、区和块简述
本文转载自:http://blog.itpub.net/17203031/viewspace-682003/ 在Oracle学习过程中,存储结构,表段区块可能是每个初学者都要涉及到的概念.表空间.段. ...
- Monad新解-FRP对比——ReactiveCocoa、RxSwift、Bacon以及背后的Functional
ReactiveX Rx的Observable的本质就是一个Event Monad,即上下文(就是图文教程中包裹的盒子)为Event的一个Monad,这里的Event定义,可以对应语言的struct或 ...
- interaction-oriented architecture - MVC
MVC(Model-View-Controller),它是专门针 对交互系统提出的,所以如果我们要构建一个交互系统,那么我们就可以直接应用MVC模式,然后 在该模式所搭建的场景的启发下去发现Model ...
- linux如何安装IntelliJ IDEA
http://www.linuxidc.com/Linux/2016-12/137946.htm 创建的那个启动器脚本,只要这样输入就可以直接启动idea了