Vue - 判断当前设备是手机端或者pc端，根据设备展示页面

判断当前设备是手机端或者pc端，根据设备展示页面

在项目中经常会遇到支持 pc端 与手机端的需求。但是 pc 端和手机端尺寸差距很大，一个文件很难实现这种需求。
这个时候就需要判断当前的设备，根据设备来跳转不同的路由。

1. 项目 router 文件夹下的 index.js 中有两个路由，分别是 pc 端路由和移动端路由

   export default new Router({
     routes: [
       {
         path: '/',
         redirect:'/pc-home'
       },
       // pc端的路由
       {
         path:'/pc-home',
         name:'pc-home',
         component:()=>import('@/components/pc/Home')
       },
       // 手机端的路由
       {
         path:'/phone-home',
         name:'phone-home',
         component:()=>import('@/components/phone/Home')
       }
     ]
   })
   

2. 在 App.vue 中判断当前设备进行跳转路由

   export default {
     name: "App",
     mounted() {
       if (this._isMobile()) {
         // 跳转至手机端路由
         alert("手机端");
         this.$router.replace("/phone-home");
       } else {
         // 跳转至 pc 端路由
         alert("pc端");
         this.$router.replace("/pc-home");
       }
     },
     methods: {
       _isMobile() {
         let flag = navigator.userAgent.match(
           /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
         );
         return flag;
       },
     },
   };