关于pc端和app切换网上很多教程是使用的在入库文件"APP.vue"添加判断,这确实很方便,但是也会延伸出很多BUG,比如刷新页面会再一次进入入口文件,路由又会重新刷新到入口文件定义的地址,于是想到使用路由守卫来判断是pc端还是mobile端。
路由守卫地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
main.js
//定义移动端
function _isMobile() {
let flag = navigator.userAgent.match(/(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
);
return flag;
}
// 路由守卫
router.beforeEach((to, from, next) => {
// 初始化路径,对引路由index.js,如果没设置可以设置一个路径为'/'的路由
if (to.path == "/") {
//重点,如果没有写这个判断,会导致死循环栈溢出
if (_isMobile()) {
// 手机端
next("/mobile/home");
} else {
// pc端
next("/pc/home");
}
} else {