vue@3.0 + vue-router@4.0 - 通过路由拦截判断移动端和PC端-CFANZ编程社区

由于本项目使用的两套代码，所以最好保持 PC端和移动端的路由保持格式和名称一致，eg：“m_index” / “p_index”；
需要用到路由重定向redirect，这里用到了两次，第一次是在进入页面时判断是进 “p_index”还是 “m_index”，在进入 “*_index” 后，用到了第二次判断 “p_home” / “m_home”，稍后来讲为什么还有第二次判断。
在每一个路由的 meta 中添加 “type: pc / mobile”，用来判断该页面是 pc 还是 mobile，在稍后的 router.beforeEach 也有用处。

具体的代码进行了摘抄，可移步公众号“DataShowChart”，找到同名称的文章，获取源码：

const routes = [
  {
    path: "/",
    redirect: redirectPath,  // 第一次 redirect
  },
  {
    path: "/p_index",
    name: "p_index",
    meta: {
      label: "首页",
      type: "pc"
    },
    redirect: "p_home",  // 第二次 redirect
    component: () =>  XXXX
    children: [
      {
        path: "/p_home",
        name: "p_home",
        meta: {
          name: "PC-首页",
          type: "pc"
        },
        component: () => XXXX
      },
    ]
  },
];

三、通过 router.beforeEach() 做路由遍历

大致可以分为三种情况：

当移动端试图访问pc端页面时
当pc端页面试图访问移动端页面时
什么都没有，直接 next()，官方解释：调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。即 beforeEach() 必须要有 next() 调用，不然可能会陷入死循环中，指路->官方文档。
next() 和 next("xxx") 的主要区别是前者（ next() ）不会再次调用router.beforeEach()，后者（ next("XXX") ）会。具体可参考 3 的官方文档。

其中第 1 点和第 2 点的判断逻辑大致相通，只是一个需要遍历展示出 type===“pc” 的，一个需要遍历展示出 type==="mobile" 的。

router.beforeEach((to, from, next) => {
  //当移动端试图访问pc端页面时
  if (/Android |webos| iPhone |iPod| BlackBerry | iPad/i.test(navigator.userAgent) && to.meta.type != 'mobile') {  // 判断设备 && 跳转的路由中meta的type类型 是否为‘mobile’
    const routers = router.options.routes.filter(v => v.name === 'm_index')[0].children; // 过滤出 m_index 下的路由
    let path = "" // 定义即将跳转的 path 地址
    routers.filter((item) => { // 遍历 刚才取出来路由组routers
      if (item.name.split('_')[1] === to.path.split('_')[1]) { // 判断 item在“_”分割后的值 和 即将跳转的path在"_" 分割后的值 是否有相同，这一步判断要求 在设置路由时，尽量保持和 格式名称一致，eg:"p_home" / "m_home"
        path = item.path
      }
    })
    if (path) { // 如果 path 有值，跳转到 该 path 页面
      next(path); 
    } else {
      next('/');
    }
  }
  // 当pc端页面试图访问移动端页面时
  if (!/Android | webos | iPhone | iPod | BLackBerry | iPad/i.test(navigator.userAgent) && to.meta.type !== 'pc') {
   //…………差不多同上………… 
  }

  //什么都没有直接 next()
  next();
});