龙凤网站建设云聚达,wordpress修改样式,100个新公司起名,烟台网站推广广州公司Vue3代码
APP文件中写入js代码
1、首先#xff0c;通过isMobile()函数判断用户的设备类型。该函数使用正则表达式匹配navigator.userAgent字符串#xff0c;以确定用户是在移动设备上访问网页还是在桌面设备上访问网页
2、然后#xff0c;在onMounted()钩子函数中#… Vue3代码
APP文件中写入js代码
1、首先通过isMobile()函数判断用户的设备类型。该函数使用正则表达式匹配navigator.userAgent字符串以确定用户是在移动设备上访问网页还是在桌面设备上访问网页
2、然后在onMounted()钩子函数中根据当前的路由路径来判断是否需要进行重定向。如果当前路径是根路径(/)或移动端首页路径(/mobile_index)则会进一步检查设备类型。
3、如果是移动设备则通过router.replace(/mobile_index)将路由重定向到移动端首页。如果是桌面设备则通过router.replace(/)将路由重定向到桌面端首页。
script setup langts
import { onMounted } from vue;
import { useRouter, useRoute } from vue-router
const router useRouter()
const route useRoute()
const isMobile () {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)return flag;
}onMounted(() {if (route.path / || route.path /mobile_index) {if (_isMobile()) {router.replace(/mobile_index)} else {router.replace(/)}}
})router中写法
import type { RouteRecordRaw } from vue-router
export const staticRoutes: ArrayRouteRecordRaw [// pc{path: /,component: () import(../views/pc_index.vue),redirect: /home,children: [{path: /home,name: Home,component: () import(../views/home/index.vue),meta: {title: 首页,icon: ele-HomeFilled,},},// 公司产品{path: /companyProducts,name: companyProducts,redirect: /companyProducts/coalAR,children: [{path: /companyProducts/coalAR,name: coalAR,component: () import(../views/companyProducts/coal/coalAR/index.vue),}],},],},// 手机端首页{path: /mobile_index,component: () import(../views/mobile_index.vue),redirect: /mobileIndex,children: [{path: /mobileIndex,name: mobileIndex,component: () import(../views/mobile/mobileIndex.vue),meta: {title: 首页,icon: ele-HomeFilled,}},// 公司产品{path: /mobileProducts,name: mobileProducts,redirect: /mobileProducts/coalAR,children: [{path: /mobileProducts/coalAR,name: mobileCoalAR,component: () import(../views/mobile/mobileProducts/coal/coalAR/index.vue),}]}]},
]
Vue2写法
在 App.vue 的 mounted 方法中对设置进行判断如下:
//App.vue
mounted() {if (this._isMobile()) {alert(手机端);this.$router.replace(/m_index);} else {alert(pc端);this.$router.replace(/pc_index);}}
methods:{isMobile () {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)return flag;
}
} /在 router/index.js 中有两个页面。 //在 router/index.js 中有两个页面。
export default new Router({mode: history,routes: [{path: ,redirect: /pc_index},{path: /pc_index, // pc端首页name: PcIndex,component: PcIndex},{path: /m_index, // 手机端首页name: MIndex,component: MIndex}]
});参考vue2链接地址【Vue】判断设备是移动端还是pc端_vue判断是pc端还是移动端-CSDN博客
