vue PC端移动端两套资源

Question

 mounted(){
    if (this.isMobile()) {
        console.log("移动端")
     this.$router.replace('/m_home');
    } else {
        console.log("pc端")
     this.$router.replace('/p_home');
    }
  },
  methods:{
   isMobile() {
    var userAgenInfo = navigator.userAgent
    var Agents = new Array('Android', 'iPhone', 'SymbianOS', 'iPad', 'iPod')
    var flag = false
      for (var v = 0; v < Agents.length; v++) {
        if (userAgenInfo.indexOf(Agents[v]) > 0) {
          flag = true
          break
        }
      }
      return flag
    }
  
  }

我在app.vue里面这样判断，但有个问题是每次刷新页面都会跳转首页，请问下该怎么解决

Answer 1

好奇，既然你页面都写了两套，为什么不把页面路由直接分成两套呢？

你使用了 this.$router.replace('/m_home'); 那路由肯定是会重定向的呀。

如果你只是首页的不一样 建议你可以把首页做成是嵌套路由，然后在 main.js 这里检查isMobile,然后缓存或者在 vuex 里。然后根据不同的判断显示不同的子路由就行了。

1. 如果所有页面都不一样我建议直接在views里把代码分成两个文件夹，然后再路由里加个二级路径就行了，如：xxx.com/m/和 xxx.com/p/.
2. 或者在打包部署阶段，配置 nginx里去解决，在项目build的时候传入参数 打包成不同端的代码就行了。