Vue判断pc和web设备打开不同的页面

最新推荐文章于 2025-04-21 22:42:08 发布
原创 最新推荐文章于 2025-04-21 22:42:08 发布 · 1.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

该博客介绍了一个Vue项目的实现需求，即首页根据设备类型（移动或PC）自动切换显示不同的页面。主要涉及的方法包括在组件的methods中检测设备类型，并据此调用相应方法进行页面跳转，以及利用Vue Router实现不同设备的路由配置。

识别电脑和移动打开不同的页面
前几天呢老板提了需求Vue项目中首页两种模式，一种浏览器，另一种用移动设备打开自动切换至移动端官网页面。
1、首页，在methods判断，当前设备是移动还是pc
在这里插入图片描述
2、调取方法判断，跳转到对应页面
在这里插入图片描述
3、router
在这里插入图片描述

专业BUG
关注
Vue - 判断访问网页客户端设备是手机移动端还是 PC 电脑端（判断设备类型是否是移动端手机）
🏆 前端领域优质创作者
06-27 7890
Vue-判断访问网页客户端设备是手机移动端还是PC电脑端（判断设备类型是否是移动端手机），vue,js利用navigator.userAgent判断是手机还是电脑，判断是页面是在手机端还是PC端打开(navigator.userAgent)，使用JS来判断页面是在手机端还是在PC端打开的方法，vue-判断设备是手机端还是pc端，vue判断是页面是手机端还是电脑端，vuejs判断客户端是pc端还是移动端，怎么知道页面是在PC上还是手机上打开的？JS判断当前访问设备是手机/平板/电脑，判断当
Vue # 如何判断当前设备是移动端还是PC端
skysys的研究小屋
04-22 3105
我的方法是在created()中根据屏幕查询 created() { this.isMobile = window.matchMedia("(max-width: 425px)").matches; },
vue router自动根据移动端,PC端开启不同页面
fanlao4203的博客
07-10 1725
1.在router中配置两个不同的路由地址入口 { path: '/loginPhone', name: 'loginPhone', component: loginPhone }, { path: '/login', name: 'login', component: _import('common/login') } 详细版: import Vue from 'vue' import Router from 'vue-router' import Home from '
一个Vue项目同时包含PC端页面和移动端页面
weixin_43239880的博客
08-21 3362
又因为移动端和pc端的设计页面差别过大，导致我们无法使用响应式的方式来处理，所以我们需要分别写两个页面来对应移动端和pc端的页面(这两页面都是在同一个vue项目)其实也可以用路由的方式来处理，将移动端和pc端都写成一个路由，如/pc和/mobile,然后我们在/search页面判断设备，如果是手机则在mounted中跳转手机的页面，不是则pc端。因为我们pc端的项目是已经做了响应式适配的，不需要再进行适配了，但是移动端的话还是需要适配的，不然跟着UI的750px的设计稿不适配，会有很大的问题。
vue前端可适配多个终端页面做修改，针对于原先为PC端如何做适配移动端的问题
weixin_43410050的博客
03-23 2566
我们在开发h5的时候需要适配不同的终端，例如：PC，移动端等场景。那么我们会有多种方案可以选择一：使用css3 判断不同的终端显示不同的样式1)好处是，只需要维护一套代码即可，但样式处理却非常麻烦，当页面结构比较复杂的时候，我们没办仅仅用css3 根据不同的终端做适配2)两套页面适配不同终端，比如淘宝网就是两套页面做适配，根据用户终端，跳转至不同的页面，这套方案可以更加灵活的做适配3)一套页面，然后两套样式+js 判断当前是哪个类型的终端；
使用device.js检测设备并实现不同设备展示不同网页
weixin_30819163的博客
08-23 245
现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果，但是有些时候想在直接在PC上展示一个做好的页面，在mobile展示另一个页面。这个时候可以借助device.js来检测设备，然后打开不同的页面（device.js 是一个可以用来检测设备，操作系统和方向的js库）。当然这种做法需要一次跳转。 假设有个m.html想用于mobile端展示，pc.html想用于pc端展示。...
vue 根据登录设备(pc/移动端)跳转不同页面
weixin_57095786的博客
04-20 1968
当不能实现pc端和移动端自适应样式的时候，可以根据判断当前访问设备(pc/移动)，跳转至不同页面。。。。。
Unity的Webgl端编写jslib常用功能，监听网页关闭刷新，判断是移动端还是pc端打开web，存储数据到Storage等功能
最新发布
TenderRain的博客
04-21 419
Webgl的扩展功能： 1、“监听网页关闭或刷新” 2、“获取当前设备时PC还是移动端” 3、“获取当前网址” 4、“获取LocalStorage的数据” 5、“保存数据到LocalStotage” 6、“获取SessionStorage的数据” 7、“保存数据到SessionStorage” 8、“将文本拷贝到剪贴板” 9、“关闭当前网页” 10、“打开网页”
vue如何在一个工程里显示pc和手机端（适用多页面复杂项目）
qq_37816525的博客
09-30 5694
App.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> import store from '@/store' import Router from 'vue-router' m...
如何限制电脑PC端访问Web页面只能手机端才能访问
04-21
在现代的互联网应用开发中，有时...综上所述，限制电脑访问Web页面只允许手机访问涉及到设备检测、服务器端和客户端实现、安全性和用户体验等多个层面。在实际应用中，应根据项目需求和实际情况灵活选择合适的方法。
vue 实现 pc 端 和 手机端 根据不同的 url 访问不同的登录页面
weixin_44941581的博客
03-15 985
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))) { window.location.href = “http://m.baidu.com/”; //手机 } else { window.locatio
vue 自动识别PC、移动端，并跳转到对应页面
weixin_33836874的博客
04-08 1881
方法一： index.html中head添加 <script type="text/javascript"> if(/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test( ...
【Vue】判断访问设备是移动端还是pc端
AlaiaCodeingLife
11-11 5414
文章目录前言使用navigator.userAgent进行判断，获取访问设备是什么一、navigator是什么？属于Browser 对象：Navigator 对象包含有关浏览器的信息。二、使用步骤1.在methods中使用2. 在你需要使用的地方引入总结Browser 对象还有大量可用数据,请按需查看 前言 使用navigator.userAgent进行判断，获取访问设备是什么 一、navigator是什么？ 属于Browser 对象：Navigator 对象包含有关浏览器的信息。 属性 说明
VUE判断是移动端还是PC端进入对应的主页
weixin_44696262的博客
03-02 1985
VUE判断是移动端还是PC端进入对应的主页
vue识别设备控制路由跳转至不同页面方案
weixin_42287176的博客
11-22 1046
vue识别设备控制路由跳转至不同页面方案
vue nuxt判断是pc端还是移动端，分别跳转不同页面
dt517311的博客
08-10 8875
vue nuxt判断是pc端还是移动端，分别跳转不同页面 第一版 defaule.vue，mounted()中进行判断： if (this.isMobile()) { console.log("手机端"); location.replace('xxxx'); } else { console.log("pc端"); } methods中： isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPo
Vue根据不同设备跳转不同路由
枫陵的博客
02-01 1124
其中design为PC端跳转路由，design3为非移动端跳转路由。如何是非PC端设备跳转design3,移动端设备跳转design。
Vue判断页面是在手机端还是PC端
qq_59626859的博客
03-11 1180
当在pc端的时候就正常显示页面，当在手机端的时候就跳转小程序；即PC端和移动端的处理场景不一样。
vue2实现 pc端 和手机端UI页面不一样的时候，根据屏幕分辨率，切换路由
xiguaxixixi的博客
08-14 807
vue2实现 pc端 和手机端UI页面不一样的时候，根据屏幕分辨率，切换路由
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值