纯前端实现移动端和网页端路由切换

# 需求背景

同一个域名有PC端和移动端两个版本，根据用户的设备自动切换PC端和移动端，即同域名下PC端和移动端分别指向不同的页面文件

# 通用做法

区分PC和移动端的通用做法应该是分配两个域名

可参考b站网页版https://www.bilibili.com/

进入这个网页后打开chrome的devtools调试

修改为手机模式后刷新

会发现它的域名变成了https://m.bilibili.com/

# 实现原理：

后端接收到了用户的第一个http请求，通过header中的ua信息，判断客户端是PC还是移动端；如果是PC端，重定向到PC端的域名，如果是移动端，定位到移动端域名

# 纯前端实现

利用 vue-router 的全局前置守卫

# 核心逻辑

给PC和移动端都分配一个路由，利用前置导航守卫判断当前设备，若为移动端就跳转到移动端的路由，若为PC端就跳转到PC的路由，

# 示例代码

// 定义一个路由，以主页面Index的页面（分PC和移动端）为例
const routes = [
  {
    path: '/pc',
    name: 'Index',
    component: () => import('@/views/Index.vue')
  },
  {
    path: '/mb',
    name: 'MobileIndex',
    component: () => import('@/views/MobileIndex.vue')
  }
]

// 实现全局前置守卫
router.beforeEach((to, from, next) => {
  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' })
    }
  } else {
    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 {
        next()
      }
    } else {
      if (to.path.indexOf('/mb') !== -1) {
        next({ path: to.path.replace('/mb', '/pc') })
      } else {
        next()
      }
    }
  }
})

实测添加二级子页面（比如/pc/xxxx和/mb/xxxx）也能完美适配。

参考：Vue-Router 全局前置守卫