VUE识别访问设备是pc端还是移动端的实现步骤

您所在的位置：网站首页 › Js判断是不是华为 › VUE识别访问设备是pc端还是移动端的实现步骤

VUE识别访问设备是pc端还是移动端的实现步骤

2023-06-08 10:28| 来源: 网络整理| 查看: 265

目录一、思路二、原理三、步骤四、结果总结

一、思路

有些网站需要区分手机端网页和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 } }

四、结果

总结

到此这篇关于VUE识别访问设备是pc端还是移动端的文章就介绍到这了,更多相关vue识别访问设备内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

【本文地址】

VUE识别访问设备是pc端还是移动端的实现步骤

VUE识别访问设备是pc端还是移动端的实现步骤

今日新闻

推荐新闻