一、思路
有些网站需要区分手机端网页和pc端网页,做到不同设备访问不同的网页,增强用户的使用体验,可以在app.vue中作一个判断(navigator.userAgent),然后跳转不同的路由。
二、原理
navigator.userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。
例如:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
然后通过match函数判断是否有包含相应移动端设备名称,从而实现区分两者。
浏览器代号: navigator.appCodeName
浏览器名称: navigator.appName
浏览器版本: navigator.appVersion
启用Cookies: navigator.cookieEnabled
硬件平台: navigator.platform
用户代理: navigator.userAgent
用户代理语言: navigator.language
三、步骤
1,先在router/index.js文件中配置好不同端口跳转的路由:
export default new Router({
routes: [
{
path: '',
redirect: '/pc_index'
},
{
path: "/pc_index", // pc端首页
name: PcIndex,
component: PcIndex
},
{
path: '/mb_index', // 移动端首页
name: MbIndex,
component: MbIndex
}
]
});
2,在App.vue中做出判断,并跳转路由即可:
mounted () {
// 根据不同路由跳转不同页面
if (this._isMobile()) {
console.log('手机端')
this.$router.replace('/mb_index')
} else {
console.log('pc端')
this.$router.replace('/pc_index')
}
},
methods: {
// 判断是否是手机端,如果是,返回true
_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
}
}
四、结果