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

本文实现的是 通过对设备的路由拦截 来判断当前设备是 移动端还是PC端，通过路由拦截可以有效避免 软路由判断时 刷新页面会回到首页的问题，当然之后也可以再出一个通过软路由实现移动端和PC端判断的文章，废话不多说，开整。

可直接拉到文章底部，关注公众号“DataShow Chart”，阅读同名称的文章，微信公众号的同名称文章最后会放出来源码，可直接拿来即用。

目录

先来说前提：

具体步骤如下：

一、初始化 Vue3 项目

二、在 src/router/index.js  创建路由

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

四、测试结果

---

先来说前提：

• 做了两套代码，移动端一套，PC端一套；
• router.beforeEach需要有一些了解，指路->官方文档
• beforeEach()必须调用next()
• next() 和 next("/XXXX")的区别

---

具体步骤如下：

一、初始化 Vue3 项目

vue create router-pc-mobile

接下来按照自己的习惯做相关配置；

二、在 src/router/index.js  创建路由

创建路由有几个需要注意的点：

1. 由于本项目使用的两套代码，所以最好保持 PC端 和 移动端 的路由 保持 格式和名称 一致，eg：“m_index” / “p_index”；
2. 需要用到路由重定向redirect，这里用到了两次，第一次是在进入页面时判断是进 “p_index”还是 “m_index”，在进入 “*_index” 后，用到了第二次判断 “p_home” / “m_home”，稍后来讲为什么还有第二次判断。
3. 在每一个路由的 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
      },
    ]
  },
];

第一次 redirect ： 用来判断 当前的 设备 需要能打开 的是 “p_index” 还是 “m_index”，这个校验判断需要配合 router.beforeEach() 来使用。

第二次 redirect ： 这个重定向是用来展示具体 path 路径的页面，可参考官方文档。

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

大致可以分为三种情况：

1. 当移动端试图访问pc端页面时
2. 当pc端页面试图访问移动端页面时
3. 什么都没有，直接 next()，官方解释：调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。即 beforeEach() 必须要有 next() 调用，不然可能会陷入死循环中，指路->官方文档。
4. 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();
});

四、测试结果

 

---

本文到这里，已经结束啦~

欢迎关注公众号“DataShow Chart” ,也可以扫码关注呀，

公众号会发布 与本文同标题 的 文章，公众号文章底部一般带有源码，欢迎来扰~~