vue|vue判断设备是移动端还是pc端 javascript|es6|vue.js

【vue|vue判断设备是移动端还是pc端】欢迎访问我的博客地址 : 博客地址

判断pc与手机端，根据不同的设置跳转不同的路由。

const routes = [ { path: "", redirect:'/test' }, { path: "/test", // pc端首页 component: () => import( "../components/test.vue") }, { path: '/mi', // 手机端首页 component: () => import( "../components/mi.vue") } ]; const router = new VueRouter({ routes }); export default router;

在 App.vue 中实现逻辑判断：

methods:{ _isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) return flag; } }, mounted(){ if (this._isMobile()) { alert("手机端"); this.$router.replace('/mi'); } else { alert("pc端"); this.$router.replace('/test'); } }

文章图片

文章图片

但这个会导致一个问题，除了Header的跳转链接，其他跳转链接都跳转到主页了
解决方法
在 router/index.js 里使用router.beforeEach,如果是跳转到pc_index的，就判断是不是移动端

//在 router/index.js 增加 router.beforeEach((to, from, next) => { //NProgress.start() if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { if (to.path.indexOf('/mi') !==-1) { next({path: to.path.replace('/mi', '/test')}) } } else { if (to.path.indexOf('/test') !== -1) { next({path: to.path.replace('/test', '/mi')}) } } next() })