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", ...
随机推荐
- 用C语言指针作为函数返回值
转载:http://c.biancheng.net/cpp/html/3242.html C语言允许函数的返回值是一个指针(地址),我们将这样的函数称为指针函数.下面的例子定义了一个函数 strlon ...
- spark出现task不能序列化错误的解决方法
应用场景:使用JavaHiveContext执行SQL之后,希望能得到其字段名及相应的值,但却出现"Caused by: java.io.NotSerializableException: ...
- Python类型总结
python 中处处是类的实例化 a=1 存储的是数字类型 而b='123'是字符串类型 []:读写方便的一张类型 True判断真假的一组{}键值对形式 class:则是描述静态元素和动态元素的结合体 ...
- Tomcat的运行模式
tomcat的三种运行模式 tomcat Tomcat Connector的三种不同的运行模式性能相差很大,有人测试过的结果如下: 这三种模式的不同之处如下: ●BIO: 一个线程处理一个请求.缺 ...
- ES6/ES2015常用知识点和概念
越来越多的开源库开始使用ES2015来构建代码了,大家知道ES6=ES2015,ES6在2015年被ECMAScript标准化组织approve,各大浏览器厂商要完全支持ES6的强大功能还须一些时日, ...
- GO语言(六)接口使用
<music> |------<src> |-------<library> |-------manager.go |-------manager_test.go ...
- some language grammars
ANSI C grammar Python grammar 怎么识别LL(1) LR(0) SLR(1) 等文法,一个不错的解答. http://stackoverflow.com/questions ...
- php获取视频长度,php.ini配置
php获取视频长度 $long = exec("ffmpeg -i video.mp4 2>&1 | grep 'Duration' | cut -d ' ' -f 4 | s ...
- HDU 5677 ztr loves substring(Manacher+dp+二进制分解)
题目链接:HDU 5677 ztr loves substring 题意:有n个字符串,任选k个回文子串,问其长度之和能否等于L. 题解:用manacher算法求出所有回文子串的长度,并记录各长度回文 ...
- Android(java)学习笔记209:Android线程形态之 HandlerThread
1. HandlerThread Android HandlerThread 完全解析 Handler与HandlerThread区别,HandlerThread应用(对比AsyncTask) 备注 ...