Vue - 判断当前设备是手机端或者pc端,根据设备展示页面
判断当前设备是手机端或者pc端,根据设备展示页面在项目中经常会遇到支持 pc 与手机端的需求。但是 pc 端和手机端尺寸差距很大,一个文件很难实现这种需求。这个时候就需要判断当前的设备,根据设备来跳转不同的路由。项目 router 文件夹下的 index.js 中有两个路由,分别是 pc 端路由和移动端路由export default new Router({routes: [{path: '/'
·
判断当前设备是手机端或者pc端,根据设备展示页面
在项目中经常会遇到支持 pc端 与手机端的需求。但是 pc 端和手机端尺寸差距很大,一个文件很难实现这种需求。
这个时候就需要判断当前的设备,根据设备来跳转不同的路由。
- 项目
router
文件夹下的index.js
中有两个路由,分别是 pc 端路由和移动端路由export default new Router({ routes: [ { path: '/', redirect:'/pc-home' }, // pc端的路由 { path:'/pc-home', name:'pc-home', component:()=>import('@/components/pc/Home') }, // 手机端的路由 { path:'/phone-home', name:'phone-home', component:()=>import('@/components/phone/Home') } ] })
- 在
App.vue
中判断当前设备进行跳转路由export default { name: "App", mounted() { if (this._isMobile()) { // 跳转至手机端路由 alert("手机端"); this.$router.replace("/phone-home"); } else { // 跳转至 pc 端路由 alert("pc端"); this.$router.replace("/pc-home"); } }, 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; }, }, };
更多推荐
已为社区贡献21条内容
所有评论(0)