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

骑猪看日落 2023-01-08 06:27 313阅读 0赞

这些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()

\})

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 laravel判断是手机移动端访问还是PC端访问

相关 JavaScript 判断浏览器是PC端还是移动端

相关 vue 判断是否function_vue 项目判断是PC端还是移动端

相关判断是PC端还是移动端

相关 JavaScript 判断设备是PC端还是移动端

相关 js判断设备是PC端还是移动端

相关判断当前登录的终端是PC端还是移动端

相关怎么判断是Pc端还是移动端？

相关判断当前客户端是pc端还是移动端还是Ipad

相关 php判断页面访问是移动端还是pc端