判断移动端与PC端的方法实现不同终端的路由跳转

在项目中经常会遇到支持 pc端 与手机端的需求。但是 pc 端和手机端尺寸差距很大，一个文件很难实现这种需求。

这个时候就需要判断当前的设备，根据设备来跳转不同的路由。

1.用途

小型项目实现移动端与PC端同一项目,实现同一链接根据设备不同显示不同的适配页面

2.缺陷

需要根据路由判断进入不同的页面,并没有进行适配,移动页面与PC页面并不是同一页面

3.用法

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

const routesP = [
  {
    path: '/',
    name: 'homePage',
    component: () => import( /* webpackChunkName: “about” */ '../view/PC/homePage.vue')
  },
  {
    path: '/PC/personalCenter',
    name: 'personalCenter',
    component: () => import( /* webpackChunkName: “about” */ '../view/PC/personalCenter.vue')
  }
]

const routesM = [
  {
    path: '/',
    name: 'homePage',
    component: () => import( /* webpackChunkName: “about” */ '../view/mobile/homePage.vue')
  },
  {
    path: '/mobile/myHobby',
    name: 'myHobby',
    component: () => import( /* webpackChunkName: “about” */ '../view/mobile/myHobby.vue')
  }
]
var routes = [];
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))) { //判断当前设备是否为各种移动端设备之一  
  routes = routesM //判断为移动端时页面采用移动端页面
} else {
  routes = routesP   //判断为pc端时页面采用pc端页面
}