Vue 在同一个项目中，判断pc端和移动端，显示不同风格的页面（附pc端移动端显示效果图）-编程知识

Vue 在同一个项目中，判断pc端和移动端，显示不同风格的页面（附pc端移动端显示效果图）

实现思路

1、修改index.html页面的meta

2、增加pc端移动端的判断

3、设置路由，根据不同的端，调用各自的路由，显示不同的页面

index.html 修改如下

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>量子文档 - 极简文档分享工具</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

移动端判断

    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端')}

路由设置 /route/index.js

    {name: 'docDetail',path: '/doc',component: DocDetail},{name: 'docDetailMobile',path: '/mdoc',component: DocDetailMobile},

判断及路转

 if (isMobile()) {this.$router.push({path: '/mdoc?shareId=' + res.data.result.id})} else {this.$router.push({path: '/doc?shareId=' + res.data.result.id})}

pc端效果图