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

Peanutty

已于 2023-03-12 17:12:56 修改

阅读量3.2k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

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

本文链接：https://blog.csdn.net/hhb442/article/details/129477926

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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;
	}
}