vue 项目判断是PC端还是移动端

这些js可以另外建一个.js的文件来写，到时候导出使用
有关浏览器类型的信息都藏在USER-AGENT里面，首先读取navigator.userAgent里面的信息，为了方便利用toLowerCase方法转成小写的形式。
方法一：
1.判断是否是微信环境的

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.判断是否是移动端的环境

1. 
   
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里面做一个判断

1. 
   
2. import Vue from 'vue'
   
3. import VueRouter from 'vue-router'
   
4. 
   
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. })
    
46. 
    
47. export default router

复制代码

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

1. 
   
2. import { isWeiXin, isMobile } from './assets/js/utils.js'
   
3. 
   
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>

复制代码