本文实现的是 通过对设备的路由拦截 来判断当前设备是 移动端还是PC端,通过路由拦截可以有效避免 软路由判断时 刷新页面会回到首页的问题,当然之后也可以再出一个通过软路由实现移动端和PC端判断的文章,废话不多说,开整。
可直接拉到文章底部,关注公众号“DataShow Chart”,阅读同名称的文章,微信公众号的同名称文章最后会放出来源码,可直接拿来即用。
目录
三、通过 router.beforeEach() 做路由遍历
先来说前提:
- 做了两套代码,移动端一套,PC端一套;
- router.beforeEach需要有一些了解,指路->官方文档
- beforeEach()必须调用next()
- next() 和 next("/XXXX")的区别
具体步骤如下:
一、初始化 Vue3 项目
vue create router-pc-mobile
接下来按照自己的习惯做相关配置;
二、在 src/router/index.js 创建路由
创建路由有几个需要注意的点:
- 由于本项目使用的两套代码,所以最好保持 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
},
]
},
];
第一次 redirect : 用来判断 当前的 设备 需要能打开 的是 “p_index” 还是 “m_index”,这个校验判断需要配合 router.beforeEach() 来使用。
第二次 redirect : 这个重定向是用来展示具体 path 路径的页面,可参考官方文档。
三、通过 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();
});
四、测试结果
本文到这里,已经结束啦~
欢迎关注公众号“DataShow Chart” ,也可以扫码关注呀,
公众号会发布 与本文同标题 的 文章,公众号文章底部一般带有源码,欢迎来扰~~