vue根据pc端、移动端做路由适配

客户端判断

this._isMobile = function () {
  return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
}

基本上大家都是通过请求头来判断客户端类型

路由导航

看到很多人在App.vue中这么写（不推荐哦）

export default {
  name: "App",
  mounted() {
    if (this.isMobile()) {
      this.$router.push("/mobileIndex");
    } else {
      this.$router.push("/pcIndex");
    }
  },
  methods: {
    isMobile() {
      let flag = navigator.userAgent.match( // match方法可在字符串内检索指定的值，
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      // console.log(flag)
      return flag;
    }
  }
};

还互相copy，我查了半天，都是这个方法……
这个方法确实能导航，但是有问题，你刷新一下就回到首页了，用户体验不好

我自己琢磨了一个方法，可能也没有很好，算是给大家抛砖引玉了
我用的是vue-router的导航守卫

在router的index.js中添加

myrouter.beforeEach((to, from, next) => {
  // console.log(to.path)
  if (to.path === '/') {
    if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
      next({path: '/mb'})
    } else {
      next({path: '/pc'})
    }
  }
 }

注意：前置守卫只能注册一个，注册两个会出现神奇的效果，嘿嘿

上面的做法只是让首页跳转成相应客户端的首页，如果要做成全路由判断，可以试试这么写。反正意思就这么个意思，靠你自己diy啦

if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
	if (to.path.indexOf('/pc') !== -1) {
    	next({path: to.path.replace('/pc', '/mb')})
    }
 } else {
 	if (to.path.indexOf('/mb') !== -1) {
    	next({path: to.path.replace('/mb', '/pc')})
 	}
 }