问题描述：在 Vue.js 项目中，因为 PC 端与 Mobile 端显示差异较大，故而需要对不同的设备进行不同的页面开发。为解决这一问题，需要在路由对当前设备进行判断，并且根据设备类型转向不同的路由路径。
将 PC 端与 Mobile 端路由路径进行统一，例如 PC 端的首页路由路径为 /，Mobile 端的首页路由路径则为 /mobile；PC 端新闻页路由路径为 /news，Mobile 端的新闻页路由路径则为 /mobile/news，根据规则可知，Mobile 端的路由路径则是在 PC 端路由路径之前加上 /monile 路径，故而可采取如下方式。
一、编辑 router 文件
// router/index.js
const routes = [
{
path: "/",
component: HomeView,
name: "Home",
meta: {
title: "首页 - 名岐居士",
},
},
{
path: "/news",
component: HomeView,
name: "NewsView",
meta: {
title: "新闻页 - 名岐居士",
},
},
{
path: "/mobile",
component: MobileView,
meta: {
title: "首页 - 名岐居士",
}
},
{
path: "/mobile/news",
component: MobileNewsView,
meta: {
title: "新闻页 - 名岐居士",
}
}
];
二、撰写前置路由守卫规则
router.beforeEach((to, from, next) => {
// 检查用户代理字符串是否包含移动设备关键字
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent);
// 如果用户正在使用移动设备，并且当前路由不以'/mobile/'开头
if (isMobile && !to.path.startsWith('/mobile/')) {
// 重定向到相应的移动路由
next('/mobile' + to.fullPath);
}
// 如果用户正在使用非移动设备，并且当前路由以'/mobile/'开头
else if (!isMobile && to.path.startsWith('/mobile/')) {
// 将'/mobile'部分替换为空字符串，重定向到相应的非移动路由
next(to.fullPath.replace('/mobile', ''));
} else {
// 如果以上条件都不满足，则继续正常导航
next();
}
});
在上述代码中，我们使用了 Vue Router 的 beforeEach 导航守卫来拦截每次导航，然后通过 const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent); 来检查用户代理字符串来判断用户是否正在使用移动设备。这里使用的是正则表达式来匹配常见的移动设备关键词。如果用户是通过移动设备访问且当前路由路径不是以 /mobile/ 开头，用户将被重定向到相应的移动路由。如果是通过非移动设备且当前路由是以 /mobile/ 开头，用户将被重定向到相应的非移动路由。如果以上条件都不满足，用户将按照原始的路由进行导航。这样不仅可以确保用户在不同设备上都能够访问到适合其设备的页面，还可以提供更为良好的用户体验。
