纳速健身

标题: vue 项目判断是PC端还是移动端 [打印本页]
作者: awagink    时间: 2021-3-2 10:15
标题: vue 项目判断是PC端还是移动端
这些js可以另外建一个.js的文件来写，到时候导出使用
有关浏览器类型的信息都藏在USER-AGENT里面，首先读取navigator.userAgent里面的信息，为了方便利用toLowerCase方法转成小写的形式。
方法一：
1.判断是否是微信环境的

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

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

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

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

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

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

  47. export default router
复制代码

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

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

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

===================================
方法二：直接用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>
复制代码









欢迎光临 纳速健身 (https://nasue.com/) Powered by Discuz! X3.4