vue 項(xiàng)目判斷是PC端還是移動(dòng)端

這些js可以另外建一個(gè).js的文件來寫翠胰，到時(shí)候?qū)С鍪褂?br> 有關(guān)瀏覽器類型的信息都藏在USER-AGENT里面，首先讀取navigator.userAgent里面的信息耀销，為了方便利用toLowerCase方法轉(zhuǎn)成小寫的形式楼眷。
1.判斷是否是微信環(huán)境的

   /**
     * 判斷是否是微信環(huán)境
     */
export function isWeiXin () {
  var ua = window.navigator.userAgent.toLowerCase()
  if (ua.indexOf('micromessenger') > -1) {
    return true // 是微信端
  } else {
    return false
  }
}

2.判斷是否是移動(dòng)端的環(huán)境

export function isMobile () {
  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))) {
    return true // 手機(jī)端
  } else {
    return false // alert('PC端')
  }
}

3.我的項(xiàng)目是移動(dòng)端和pc端寫在一個(gè)項(xiàng)目里面的，沒有分開寫，但是頁面和路由有分開罐柳，如果是移動(dòng)端的掌腰，我會在前面加一個(gè)/mb/xxx/:id的路由，如果是pc端的张吉，我會在路由里面/pc/xxx/:id這樣來寫齿梁，到時(shí)候在mian.js里面做一個(gè)判斷

import Vue from 'vue'
import VueRouter from 'vue-router'

// 移動(dòng)端首頁
import mbHome from '../mb/Index'
Vue.use(VueRouter)
const routes = [
  {
    // 移動(dòng)端首頁
    path: '/mb',
    name: 'mbHome',
    component: mbHome,
    meta: {
      title: '首頁'
    }
  },
 {
    // PC端首頁
    path: '/pc',
    name: 'pcHome',
    component: pcHome,
    meta: {
      title: '首頁'
    }
  }
]
const router = new VueRouter({
  mode: 'history',
  // scrollBehavior (to, from, savedPosition) {
  //   // 如果你的連結(jié)是帶 # 這種
  //   // to.hash 就會有值(值就是連結(jié))
  //   // 例如 #3
  //   if (to.hash) {
  //     return {
  //       // 這個(gè)是透過 to.hash 的值來找到對應(yīng)的元素
  //       // 照你的 html 來看是不用多加處理這樣就可以了
  //       // 例如你按下 #3 的連結(jié)，就會變成 querySelector('#3')肮蛹，自然會找到 id = 3 的元素
  //       selector: to.hash
  //     }
  //   }
  // },
  base: window.location.pathname.split('/')[1],
  routes
})

export default router

4.在main.js導(dǎo)入勺择，然后做一個(gè)判斷

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

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  var urlroute = window.location.pathname.toLowerCase().split('/')
  if (store.state.cname !== urlroute[1]) {
    store.commit('setCname', urlroute[1])
  }
  var path = to.path
  if (isWeiXin() || isMobile()) {
    if (path === '/') {
      next({ path: '/mb' })
    } else if (path.indexOf('/pc') !== -1) {
      path = path.replace('/pc', '/mb')
      next({ path: path })
    } else {
      next()
  } else {
    if (path === '/') {
      next({ path: '/pc' })
    } else if (path.indexOf('/mb') !== -1) {
      path = path.replace('/mb', '/pc')
      next({ path: path })
    } else {
      next()
    }
  }
})

大概就是這些，有些東西有刪減蔗崎，可能不是很完整

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者