vue中实现一个项目里兼容移动端和电脑端

原创已于 2023-03-12 17:12:56 修改 · 3.6k 阅读

24 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

当前文章被收录于：

Vue

9 篇文章 0 人学习

vue

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2023-03-12 17:09:49 首次发布

文章介绍了一种在Vue项目中让移动端和PC端展示不同页面的方法，通过判断设备类型来切换路由。在App.vue的mounted钩子中检测是否为移动端，如果是则重定向到移动端特定路由/mobile，实现了不使用响应式设计，而是分别构建移动端和简化版PC端界面。

vue中实现一个项目里兼容移动端和电脑端

这种方案不是响应式方案，而是同一个项目（同一个ip和端口）移动端和pc端展示不同的页面，考虑到移动端的功能可能只是pc端的简化，所以是重新写移动端的界面（可能只是样式的调整，也可能是功能的简化）

首先只需要移动端路由和pc端路由不同，如下，移动端和pc端路由不同

在这里插入图片描述

从上面的路由可以看出如果访问 ip:port 默认进的是pc端路由，那么如何让移动端访问 ip:port 进入 /mobile下的路由呢，
只需要在项目App.vue的mounted()钩子函数中做如下判断，进行路由跳转

mounted() {
// 判断是否是手机端
    if(this._isMobile()){
        //手机端
        this.$router.replace("/mobile")
    }

},
methods:{
	// 判断是否是移动端
	_isMobile(){
	    let flag = navigator.userAgent.match(
	        /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
	    );
	    return flag;
	}
}