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])
                //电脑转手机端
                //域名为index_p去掉_p变成手机端index路由
                if (to.name=="index_p") {
                  let str = to.name.split("_p")[0];
                  let str2 = '/'+str;
                  this.$router.push(str2);
                }
            } else if (to.name.indexOf('_p') < 0 && this.$pc) {
            	//手机端转电脑
            	//在路由尾巴添加_p变成电脑端
                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路由router文件的配置，我使用的是如下的配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
      //跳转到index_p，并且默认是首页
      { path: '/', redirect: 'index_p', },
      {
        path: '/index_p',
        name: 'index_p',
        component: resolve => require(['../views/PC/Index_p.vue'], resolve),
        meta: {
          active: "1"
        }
      },
      {
        path: '/index',
        name: 'index',
        component: resolve => require(['../views/H5/Index.vue'], resolve),
      },
    ]
  })


export default router