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端效果图

移动端效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/239784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51单片机模数转换ADC原理与代码一

51单片机模数转换ADC原理与代码一 1.概述 这篇文章是模数转换的入门文章&#xff0c;这篇文章主要介绍模数的概念、原理、核心指标、专业术语&#xff0c;以及一个模数转换的实例代码实现检测电位器的数值变化。 2.ADC介绍 2.1.ADC概念 ADC(Analog-to-Digital Converter)是…

tomcat和nginx自定义404错误页面

nginx 编辑nginx配置文件 vim /www/server/nginx/nginx.conf server{listen 80;error_page 404 /404.html;location /404.html{root /home/liu/html/error-html;} }在家目录下创建一个html/error-html目录&#xff0c;用于存放错误页面 在error-html目录下创建404.html&a…

node.js mongoose index(索引)

目录 简介 索引类型 单索引 复合索引 文本索引 简介 在 Mongoose 中&#xff0c;索引&#xff08;Index&#xff09;是一种用于提高查询性能的数据结构&#xff0c;它可以加速对数据库中文档的检索操作 索引类型 单索引、复合索引、文本索引、多键索引、哈希索引、地理…

面试建议篇(持续更新....)

不要把面试当作回答问题的过程&#xff0c;而是一个交流和沟通过程。 和面试官交流比重是1:3。 面对毫不知情的问题&#xff1a;直言没有遇到过&#xff0c;然后说出自己的理解。解决问题的思路比标准答案更重要&#xff1b;真诚是最核心的加分项。 当我遇到问题时&#xff0c;…

ubuntu20 安装缺失的字体

在/usr/share/fonts创建文件夹winfonts sudo mkdir winfonts 下载缺失的字体后&#xff0c;复制命令到对应的文件夹。 刷新字体库 sudo mkfontscale sudo mkfontdir sudo fc-cache

c# opencv 获取多边形中心点

在C#中使用OpenCV获取多边形的中心点&#xff0c;可以按照以下步骤进行&#xff1a; 首先&#xff0c;你需要找到图像中的轮廓。这可以通过FindContours方法实现&#xff1a; using OpenCvSharp;Mat src new Mat("your_image_path", ImreadModes.Grayscale); Mat …

十二、W5100S/W5500+RP2040之MicroPython开发<MQTT旧版OneNET示例>

文章目录 1. 前言2. 平台操作流程3. WIZnet以太网芯片4. 示例讲解以及使用4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 烧录验证 5. 注意事项6. 相关链接 1. 前言 在这个智能硬件和物联网时代&#xff0c;MicroPython和树莓派PICO正以其独特的优势引领着嵌入式开发…

人工智能_机器学习070_SVM支持向量机_软间隔及优化_硬间隔_衡量间隔软度_引入松弛变量_理解隔离参数---人工智能工作笔记0110

我们继续说,之前说的C是什么意思? 我们在这个软间隔优化中就可以引出C 可以看到之前我们讨论的问题,都是基于样本点的,完全的线性可分的问题,我们称为硬间隔 可以看到这种,一分就可以,分开,简单分割就可以分开的数据,我们称之为硬间隔 但是可以看到上面这种情况,无论怎么分,都…

智能硬件(6)之通用引脚(GPIO)

小编带领大家学习的四大开源硬件和智能模块&#xff0c;他们之间是如何通信的&#xff0c;主控芯片是如何控制智能模块&#xff0c;做某些事情呢&#xff1f;有没有小朋友发起疑问呢&#xff1f; 这里&#xff0c;涉及到了特别重要的知识点&#xff0c;就是通用引脚&#xff0c…

Apache Flink 进阶教程(六):Flink 作业执行深度解析

目录 前言 Flink 四层转化流程 Program 到 StreamGraph 的转化 StreamGraph 到 JobGraph 的转化 为什么要为每个 operator 生成 hash 值&#xff1f; 每个 operator 是怎样生成 hash 值的&#xff1f; JobGraph 到 ExexcutionGraph 以及物理执行计划 Flink Job 执行流程…

华为端口隔离简单使用方法同vlan下控制个别电脑不给互通

必须得用access接口&#xff0c;hybrid口不行 dhcp enable interface Vlanif1 ip address 192.168.1.1 255.255.255.0 dhcp select interface interface MEth0/0/1 interface GigabitEthernet0/0/1 port link-type access port-isolate enable group 1 interface GigabitEther…

【大模型实践】基于文心一言的对话模型设计

文心一言&#xff08;英文名&#xff1a;ERNIE Bot&#xff09;是百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动、回答问题、协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。文心一言从数万亿数据和数千亿知识…

机器学习笔记 - 音频信号处理基础知识

一、音频处理基础 音频处理是指使用各种技术和算法对音频信号进行操作和修改。 它涉及对音频数据应用数字信号处理 (DSP) 方法,以增强、修改或分析声音。音频处理广泛应用于各种应用中,包括音乐制作、电信、语音识别、音频压缩等。 1、信号类型 连续信号:连续信号或连续时间…

构建创新学习体验:企业培训系统技术深度解析

企业培训系统在现代企业中发挥着越来越重要的作用&#xff0c;它不仅仅是传统培训的延伸&#xff0c;更是技术创新的结晶。本文将深入探讨企业培训系统的关键技术特点&#xff0c;并通过一些简单的代码示例&#xff0c;展示如何在实际项目中应用这些技术。 1. 前端技术&#…

开源 AI 新秀崛起:Bittensor 更像是真正的“OpenAI”

强大的人工智能正在飞速发展&#xff0c;而完全由 OpenAI、Midjourney、Google&#xff08;Bard&#xff09;这样的少数公司控制 AI 不免让人感到担忧。在这样的背景下&#xff0c;试图用创新性解决方案处理人工智能中心化问题、权力集中于少数公司的 Bittensor&#xff0c;可谓…

【操作系统】学习操作系统知识

文章目录 前言测量系统调用和上下文切换的成本 前言 ref&#xff1a;http://ges.cs.wisc.edu/~remzi/OSTEP/Chinese 零散的记录知识&#xff0c;看《操作系统引论》 测量系统调用和上下文切换的成本 上下文切换需要多长时间&#xff1f;甚至系统调用要多长时间&#xff1f;…

PHP下载安装以及基本配置

目录 引言 官网 下载 配置 1. 鼠标右键“此电脑”>“属性” 2. 打开高级系统设置 3. 打开环境变量 4. 双击系统变量中的path 5. 新建新的path 6. 将刚刚安装的位置加入环境变量 7. 检查是否安装成功 引言 PHP&#xff08;"PHP: Hypertext Preprocessor"…

R语言【dplyr】——filter保留符合筛选条件的行,以数据的行为单位,创建子集

Package dplyr version 1.1.4 Parameters filter(.data, ..., .by NULL, .preverse FALSE) 参数【.data】&#xff1a;一个数据集&#xff08;data frame&#xff09;&#xff0c;数据集扩展&#xff08;比如&#xff1a;tibble&#xff09;&#xff0c;或者 lazy data fram…

爬虫工作量由小到大的思维转变---<第二十一章 Scrapy日志设置与Python的logging模块对比>

前言: 在开发爬虫程序时&#xff0c;日志记录对于调试和故障排除至关重要。Scrapy是一个强大的Python爬虫框架&#xff0c;提供了自己的日志设置功能。然而&#xff0c;与Python的标准库logging模块相比&#xff0c;Scrapy的日志设置有其独特的优势和用法。 正文: Scrapy中的…

PLC物联网,实现工厂设备数据采集

随着工业4.0时代的到来&#xff0c;物联网技术在工厂设备管理领域的应用日益普及。作为物联网技术的重要一环&#xff0c;PLC物联网为工厂设备数据采集带来了前所未有的便捷和高效。本文将围绕“PLC物联网&#xff0c;实现工厂设备数据采集”这一主题&#xff0c;探讨PLC物联网…