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. 【读书笔记】思维导图 Talk Like Ted

  2. Ganglia安装

    一.rrdtool安装 1.1 安装依赖包 由于rrdtool依赖的包比较多,而且包之间也存在依赖,故使用yum安装由于服务器无法联网,故使用iso文件创建本地yum源,方法见下: (1)创建iso存 ...

  3. C#启动服务

    启动服务的方法有很多种,简单的cmd下dos命名,手动启动,还有C#代码启动. 我们要实现的功能: 判断是否安装 是否启动 启动服务 关闭服务 我封装了有关服务的代码,如下: using System ...

  4. 并发包CallableAndFuture

    /** * * @描述: Callable Future * * 程序运行一个线程,线程运行结束后,我们可以获取另一个线程的结果 * * @作者: Wnj . * @创建时间: 2017年5月16日 ...

  5. golang闭包

    http://blog.51cto.com/speakingbaicai/1703229 https://www.jianshu.com/p/fa21e6fada70 所谓闭包就是一个函数" ...

  6. Hadoop HA集群的搭建

    HA 集群搭建的难度主要在于配置文件的编写, 心细,心细,心细! ha模式下,secondary namenode节点不存在... 集群部署节点角色的规划(7节点)------------------ ...

  7. Linux->ZooKeeper集群搭建

    人,总免不了有心结,限制着自己,难以前行.对于ZooKeeper的理解,以及实践也拖了很久,今天用零散时间学习一下,补点干货. 一.简述 Zookeeper是Google的Chubby一个开源的实现, ...

  8. 【转】Linux中/etc/profile,/etc/bashrc,~/.profile,~/.bashrcd的区别

    //因为在原文章中博主说以下内容是网友说的,所以我就只加个转了,找不到原作者 /etc/profile,/etc/bashrc 是系统全局环境变量设定 ~/.profile,~/.bashrc用户家目 ...

  9. Oracle数据库设计实例-实时生产效率系统数据库设计

    Oracle数据库设计实例-实时生产效率系统数据库设计 引言 1.1 设计前提 某部门经理要求IT部门设计一个流水线实时生产效率系统,用来统计实时的生产量和效率.流水线有数百条,实时间隔为1min. ...

  10. 查看dump oracle数据块查看

    alter system dump datafile 8 block 2523; Block dump from disk:buffer tsn: 87 rdba: 0x160dd924 (88/90 ...