1, 首先判断设备:在main.js里面写

  1. // vue原型挂载 - 是否PC端
  2. if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  3. Vue.prototype.$pc = false
  4. hostConfig.vconsole && new VConsole()
  5. } else {
  6. Vue.prototype.$pc = true
  7. let winWidth = document.documentElement.offsetWidth ||
  8. document.body.offsetWidth
  9. winWidth = winWidth < 1366 ? 1366 : winWidth
  10. let oHtml = document.getElementsByTagName('html')[0]
  11. oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'
  12. window.addEventListener('resize', function () {
  13. let winWidth = document.documentElement.offsetWidth || document.body.offsetWidth
  14. winWidth = winWidth < 1366 ? 1366 : winWidth
  15. let oHtml = document.getElementsByTagName('html')[0]
  16. oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'
  17. })
  18. }

2, 在app.vue里面

  1. watch: {
  2. $route: function (to, from) {
  3. if (to.name.indexOf('_p') > 0 && !this.$pc) {
  4. this.$router.replace(to.name.split('_p')[0])
  5. } else if (to.name.indexOf('_p') < 0 && this.$pc) {
  6. this.$router.replace(to.name + '_p')
  7. }
  8. }
  9. },

3,路由表配置

  1. {
  2. path: '/index',
  3. name: 'index',
  4. component: resolve => require(['../views/Index/index.vue'], resolve)
  5. },
  6. {
  7. path: '/index_p',
  8. name: 'index_p',
  9. component: resolve => require(['../views/Index_p/index.vue'], resolve)
  10. },

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. androidcoookie

    https://segmentfault.com/a/1190000002877843 目前在操作登录的coookie,js和原生

  2. python vscode在centos下安装

    对于centos则如下: sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e ...

  3. UML面向对象建模基础

    一个比较好的UML教程PPT https://wenku.baidu.com/view/cf80902e26284b73f242336c1eb91a37f11132ac.html

  4. ubuntu install chrome

    sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/ wget -q -O - h ...

  5. She must be at least thirty-five years old.

    She must be at least thirty-five years old. Though life's goodness can at times be overshadowed,it i ...

  6. sql2005 和 mysql 定时备份批处理

    保存为sqlbak.bat  目录我直接放winrar 的根目录了 或者拷贝一个winrar.exe 具体目录随意. 然后添加计划任务个人的话建议一周或者一天 虚拟主机等 建议每周或者每月 @echo ...

  7. [转]java中的Static class

    转自:http://www.cnblogs.com/kissazi2/p/3971065.html Java中的类可以是static吗?答案是可以.在java中我们可以有静态实例变量.静态方法.静态块 ...

  8. 在前端页面展示Markdown文件

    常我们都会在GitHub上浏览很多的readme文件,这些都是Markdown语法写成的Markdown文件,HTML中并没有用于展示Markdown文件的元素,那么为什么可以在前端展示呢? 有别于G ...

  9. EOJ-3300 奇数统计(高维前缀和)

    题目链接: https://acm.ecnu.edu.cn/problem/3300/ 题目大意: 给n个数,求在n个数中选两个数(可重复),使得这两个数的组合数是奇数,求总共有多少种取法. 解题思路 ...

  10. 国外优秀JavaScript资源推荐

    JavaScript的优秀资源          原文链接:http://code.tutsplus.com/articles/resources-for-staying-on-top-of-java ...