返回顶部

[Vue.js] vue 项目判断是PC端还是移动端

[复制链接]
awagink 显示全部楼层 发表于 2021-3-2 10:15:32 |阅读模式 打印 上一主题 下一主题
这些js可以另外建一个.js的文件来写,到时候导出使用
有关浏览器类型的信息都藏在USER-AGENT里面,首先读取navigator.userAgent里面的信息,为了方便利用toLowerCase方法转成小写的形式。
方法一:
1.判断是否是微信环境的

  1.    /**
  2.      * 判断是否是微信环境
  3.      */
  4. export function isWeiXin () {
  5.   var ua = window.navigator.userAgent.toLowerCase()
  6.   if (ua.indexOf('micromessenger') > -1) {
  7.     return true // 是微信端
  8.   } else {
  9.     return false
  10.   }
  11. }
复制代码

2.判断是否是移动端的环境

  1. export function isMobile () {
  2.   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))) {
  3.     return true // 手机端
  4.   } else {
  5.     return false // alert('PC端')
  6.   }
  7. }
复制代码

3.我的项目是移动端和pc端写在一个项目里面的,没有分开写,但是页面和路由有分开,如果是移动端的,我会在前面加一个/mb/xxx/:id的路由,如果是pc端的,我会在路由里面/pc/xxx/:id这样来写,到时候在mian.js里面做一个判断

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'

  3. // 移动端首页
  4. import mbHome from '../mb/Index'
  5. Vue.use(VueRouter)
  6. const routes = [
  7.   {
  8.     // 移动端首页
  9.     path: '/mb',
  10.     name: 'mbHome',
  11.     component: mbHome,
  12.     meta: {
  13.       title: '首页'
  14.     }
  15.   },
  16. {
  17.     // PC端首页
  18.     path: '/pc',
  19.     name: 'pcHome',
  20.     component: pcHome,
  21.     meta: {
  22.       title: '首页'
  23.     }
  24.   }
  25. ]
  26. const router = new VueRouter({
  27.   mode: 'history',
  28.   // scrollBehavior (to, from, savedPosition) {
  29.   //   // 如果你的連結是帶 # 這種
  30.   //   // to.hash 就會有值(值就是連結)
  31.   //   // 例如 #3
  32.   //   if (to.hash) {
  33.   //     return {
  34.   //       // 這個是透過 to.hash 的值來找到對應的元素
  35.   //       // 照你的 html 來看是不用多加處理這樣就可以了
  36.   //       // 例如你按下 #3 的連結,就會變成 querySelector('#3'),自然會找到 id = 3 的元素
  37.   //       selector: to.hash
  38.   //     }
  39.   //   }
  40.   // },
  41.   base: window.location.pathname.split('/')[1],
  42.   routes
  43. })

  44. export default router
复制代码

4.在main.js导入,然后做一个判断

  1. import { isWeiXin, isMobile } from './assets/js/utils.js'

  2. router.beforeEach((to, from, next) => {
  3.   if (to.meta.title) {
  4.     document.title = to.meta.title
  5.   }
  6.   var urlroute = window.location.pathname.toLowerCase().split('/')
  7.   if (store.state.cname !== urlroute[1]) {
  8.     store.commit('setCname', urlroute[1])
  9.   }
  10.   var path = to.path
  11.   if (isWeiXin() || isMobile()) {
  12.     if (path === '/') {
  13.       next({ path: '/mb' })
  14.     } else if (path.indexOf('/pc') !== -1) {
  15.       path = path.replace('/pc', '/mb')
  16.       next({ path: path })
  17.     } else {
  18.       next()
  19.   } else {
  20.     if (path === '/') {
  21.       next({ path: '/pc' })
  22.     } else if (path.indexOf('/mb') !== -1) {
  23.       path = path.replace('/mb', '/pc')
  24.       next({ path: path })
  25.     } else {
  26.       next()
  27.     }
  28.   }
  29. })
复制代码

===================================
方法二:直接用vue写
  1. <div>//App.vue,判断是否为移动端</div><div>_isMobile() {</div><div>    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)</div><div><span style="white-space:pre">        </span> return flag;</div><div>}</div><div></div>
复制代码


  1. <div>
  2. </div><div><div>//App.vue</div><div>mounted() {</div><div>    if (this._isMobile()) {</div><div>      alert("手机端");</div><div>      this.$router.replace('/m_index');</div><div>    } else {</div><div>      alert("pc端");</div><div>      this.$router.replace('/pc_index');</div><div>    }</div><div>  }</div></div>
复制代码





您需要登录后才可以回帖 登录 | 注册

本版积分规则

纳速健身网成立于2006年8月,是国内优秀健身运动网站,现拥浏览人数超30万。网站是集养生、武术、太极拳和健身气功等多种健身项目于一体的多功能交流平台。平台提供大量优质的教学视频、伴奏音乐(太极拳晨练音乐,广场舞音乐,健身气功音乐)、图文教程、运动科普和经验分享,为健身爱好者提供完善的运动指导平台。
  • 纳速QQ群乙:151815303
  • 纳速QQ群丙:79104490
  • 微信交流群:微信好友搜索【nasuwang】加小纳微信进群交流健身知识,备注【纳速】
  •                     或者扫描页面底部右侧二维码添加小纳微信>>>
  • 微信公众号

  • 微信群客服交流

  • Copyright © 2006-2021, 纳速健身网. | | 辽ICP备13002388号-1 辽公安网备21050202000005号公安网备号 纳速武术-乙 QQ