VUE识别访问设备是pc端还是移动端的实现步骤
更新时间：2023年05月25日 16:11:19 作者：Sca_杰
经常在项目中会有支持pc与手机端需求,并且pc与手机端是两个不一样的页面,这时就要求判断设置,下面这篇文章主要给大家介绍了关于VUE识别访问设备是pc端还是移动端的相关资料,需要的朋友可以参考下
一、思路
有些网站需要区分手机端网页和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识别访问设备内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决Vuepress码云部署及自动跳转404的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最近做项目遇到的一个功能,禁止用户在输入内容的时候选择今天以前的日期或者包含今日的日期,本文主要介绍了element 时间选择器禁用选择的使用示例,感兴趣的可以了解一下2023-09-09
vue2.0 better-scroll 实现移动端滑动的示例代码
本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2018-01-01
这篇文章主要给大家介绍了Vue项目中如何在父组件中直接调用子组件的方法,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于vue中data改变后让视图同步更新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue3 多种方法的锚点定位，使用 Vue Router 导航守卫可以简化导航逻辑、统一管理导航逻辑和进行权限控制，但需要学习和理解相关概念，并且需要手动编写和管理导航守卫的逻辑,本文给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
vue中使用vue-seamless-scroll插件实现列表无缝滚动效果
这篇文章主要介绍了vue中使用vue-seamless-scroll插件无缝滚动,支持上下左右无缝滚动，单步滚动停留时间，以及水平方向的手动切换，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue中如何使用math.js问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了.html页面引入vue并使用公共组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了VueJS实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
最新评论