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端。同一个项目,配置不同的路由的更多相关文章

  1. PHP项目实现手机端和PC端的页面切换

    目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...

  2. PHP判断是手机端还是PC端

    function check_wap() { if (isset($_SERVER['HTTP_VIA'])) return true; if (isset($_SERVER['HTTP_X_NOKI ...

  3. CSS3及JS简单实现选项卡效果(适配手机端和pc端)

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  4. 腾讯首页分辨手机端与pc端代码

    腾讯首页分辨手机端与pc端代码 自己在做网页的时候在腾讯网首页借鉴的代码. 代码: <!-- 移动适配JS脚本 --> <script type="text/javascr ...

  5. vue-判断设备是手机端还是pc端

    经常在项目中会有支持 pc 与手机端需求.并且pc与手机端是两个不一样的页面.这时就要求判断设置,根据不同的设置跳转不同的路由. [代码演示] 在 router/index.js 中有两个页面. ex ...

  6. 获取网页是手机端还是PC端访问

    C#方式: /// <summary> /// 是否手机访问 /// </summary> /// <returns></returns> public ...

  7. php 判断是否手机端还是pc端

    来自:https://www.cnblogs.com/webenh/p/5621890.html 用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到PC ...

  8. 【转】自动识别是手机端还是pc端只用一行代码就搞定

    <script type="text/javascript"> var mobileAgent = new Array("iphone", &quo ...

  9. js判断客户端是手机端还是PC端

    封装函数: function isPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...

随机推荐

  1. 【Python】Python3基本语法入门学习

    0.Python概述 1.First Word Game 2.变量与字符串 3.improved game 4.Python数据类型 5.常用操作符 6.分支与循环 7.列表 8.元组 9.字符串内置 ...

  2. C# 中重载自增自减操作符的具体运算原理 ----从C++程序员的角度看C#自增操作符重载的实质

    看了看C#的运算符重载,发现与C++打不相同.刚刚被C#的自增操作符坑了,现在来分享一下. 先定义一个类 class A { public int i; public A(int I) { i = I ...

  3. 【NLP_Stanford课堂】文本分类1

    文本分类实例:分辨垃圾邮件.文章作者识别.作者性别识别.电影评论情感识别(积极或消极).文章主题识别及任何可分类的任务. 一.文本分类问题定义: 输入: 一个文本d 一个固定的类别集合C={c1,c2 ...

  4. VS断点不生效

    工程属性页中“配置属性”->“C/C++”->“常规”->“调试信息格式”,选择“用于“编辑并继承”的程序数据库(/ZI)”. 在“配置属性”->“链接器”->“调试”- ...

  5. Mysql学习---SQL语言的四大分类

    SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 1. 数据查询语言DQL 数据查询语言DQL基本结构是由SELECT子句,FROM子句,WHE ...

  6. LINUX中块设备文件和字符设备文件的本质区别

    在LINUX系统文件类型分类的文章中我们提到了 块设备 和 字符设备文件,那么什么是块设备 字符设备文件呢?他们之间有什么本质上的区别呢? 设备文件分为 Block(块) Device Driver ...

  7. docker中自定ingress网络

    在某些时候,docker自动生成的ingress网络会与服务器上已经存在的网络产生冲突,这个时候,你需要自定义ingress. 在自定义前,你需要删除所有有端口发布的服务. 使用命令docker ne ...

  8. API 网关

    使用 API 网关   链接:https://github.com/oopsguy/microservices-from-design-to-deployment-chinese译者:Oopsguy ...

  9. GPRS研究(3):NO CARRIER错误的含义解释

    NO CARRIER(必须是大写)是一个由猫向其所附着的设备(典型的就是一个计算机)发来的文本响应信息,表示猫没有连接到远程系统.NO CARRIER是由Hayes指令集定义的,由于Hayes猫的普及 ...

  10. 详解为什么32位系统只能用4G内存.

    本文转自:https://www.cnblogs.com/nvd11/archive/2013/04/02/2996784.html,感谢作者的干货 既然是详解, 就从最基础的讲起了. 1. Bit( ...