vue中一个项目里兼容移动端和pc端

话不多说,上代码

先来看一下我的文件

vue中一个项目里兼容移动端和pc端_第1张图片

路由文件 index.js:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
     
  mode:"history",
  routes: [
    // pc端
    {
     
      path: '/',
      name: 'pc/home',
      component: ()=>import("@/components/pc/home"),
    },
    // 手机端
    {
     
      path: '/mobile/home',
      name: 'mobile/home',
      component: ()=>import("@/components/mobile/home"),
    },
  ]
})

在app.vue中

mounted(){
     
    if (this._isMobile()) {
     
      // 手机端
      this.$router.replace("/mobile/home");
    } else {
     
      // pc端
      this.$router.replace("/");
    }
},
methods:{
     
 _isMobile() {
     
      let flag = navigator.userAgent.match(
     /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
      );
      return flag;
    },
}

你可能感兴趣的:(VUE,vue)