vue识别设备控制路由跳转至不同页面方案

一、需求背景

当你开发完一个PC端系统后，这时你的领导突然想在手机端去进行一些操作，但是你并没有适配手机端，这个时候该怎么办呢？
改造原有代码，适配移动端？不知道你有没有听过，能运行的代码最好不要动，而且这个方案的工期也不短（如果你有时间，有耐心，那当我没说）
那有没有不影响当前系统又能快速迭代的方案呢？详情请见下文分解

二、识别设备跳转

主要开发流程步骤如下：

1. 单独开发移动端页面
2. 将pc端系统路由注册至移动端项目
3. 在原先系统路由拦截器判断设备并控制跳转

router.beforeEach(async (to) => {
	// 跳转条件可加上匹配指定路由，不需要跳转到移动端的页面正常跳转
    if (
      window.navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      window.location.replace(`http://localhost:3000${to.fullPath}`);
    }
  });

三、方案存在问题

1. pc端和移动端需解决用户状态共享问题，可通过部署在同一主域下用cookies共享
2. 路由跳转时还是会先跳转到pc端，再从pc端重定向到移动端页面，用户体验欠佳，可以在更上一层处理重定向问题，例如nginx