這些js可以另外建一個.js的檔案來寫，到時候導出使用
有關浏覽器類型的資訊都藏在USER-AGENT裡面，首先讀取navigator.userAgent裡面的資訊，為了友善利用toLowerCase方法轉成小寫的形式。
1.判斷是否是微信環境的
export function isWeiXin () {
var ua = window.navigator.userAgent.toLowerCase()
if (ua.indexOf('micromessenger') > -1) {
return true // 是微信端
} else {
return false
}
}
2.判斷是否是移動端的環境
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 // 手機端
} else {
return false // alert('PC端')
}
}
3.我的項目是移動端和pc端寫在一個項目裡面的，沒有分開寫，但是頁面和路由有分開，如果是移動端的，我會在前面加一個/mb/xxx/:id的路由，如果是pc端的，我會在路由裡面/pc/xxx/:id這樣來寫，到時候在mian.js裡面做一個判斷
import Vue from 'vue'
import VueRouter from 'vue-router'
// 移動端首頁
import mbHome from '../mb/Index'
Vue.use(VueRouter)
const routes = [
{
// 移動端首頁
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) {
// // 如果你的連結是帶 # 這種
// // to.hash 就會有值(值就是連結)
// // 例如 #3
// if (to.hash) {
// return {
// // 這個是透過 to.hash 的值來找到對應的元素
// // 照你的 html 來看是不用多加處理這樣就可以了
// // 例如你按下 #3 的連結，就會變成 querySelector('#3')，自然會找到 id = 3 的元素
// selector: to.hash
// }
// }
// },
base: window.location.pathname.split('/')[1],
routes
})
export default router
4.在main.js導入，然後做一個判斷
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()
}
}
})