实现思路
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端效果图
移动端效果图
