vue 判断设备Pc 还是移动动态加载不同路由。

最新推荐文章于 2023-03-12 17:09:49 发布
置顶 最新推荐文章于 2023-03-12 17:09:49 发布
阅读量1k 收藏 3
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46011551/article/details/107494809
版权

vue 判断设备Pc 还是移动动态加载不同路由.

经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。写个笔记记录一下。

首先要写好两个不通设备的页面，在路由里面做判断(router=>index.js)
在这里插入图片描述

在这里插入图片描述

自己去试试叭

ZhangHao9___
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 区分pc以及移动端路由
肖皓文
05-05 3331
移动设备应用越来越广泛的今天，许多网站都开始做移动端的界面展示，两者屏幕尺寸差异很大，所以展示的内容也有所差别。于是就遇到一个问题，如何判断你的页面是在移动端还是在PC端打开的。 在App.vue文件中关键代码如下 export default { name: "App", mounted() { if (this.isMobile()) { this.$rout...
vue+axios 前端实现登录拦截（路由拦截、http拦截）
weixin_30895603的博客
06-27 1627
一、路由拦截 登录拦截逻辑 第一步：路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。 const routes = [ { path: '/', name: '/', component: Ind...
vue@3.0 + vue-router@4.0 - 通过路由拦截判断移动端和PC端
ansheng02的博客
01-07 1978
本文实现的是 通过对设备的路由拦截 来判断当前设备是 移动端还是PC端，通过路由拦截可以有效避免 软路由判断时 刷新页面会回到首页的问题，当然之后也可以再出一个通过软路由实现移动端和PC端判断。
vue识别设备控制路由跳转至不同页面方案
weixin_42287176的博客
11-22 876
vue识别设备控制路由跳转至不同页面方案
vue中实现一个项目里兼容移动端和电脑端
hhb442的博客
03-12 2958
这种方案不是响应式方案，而是同一个项目（同一个ip和端口）移动端和pc端展示不同的页面，考虑到移动端的功能可能只是pc端的简化，所以是重新写移动端的界面（可能只是样式的调整，也可能是功能的简化）从上面的路由可以看出如果访问 ip:port 默认进的是pc端路由，那么如何让移动端访问 ip:port 进入 /mobile下的路由呢，首先只需要移动端路由和pc端路由不同，如下，移动端和pc端路由不同。的mounted()钩子函数中做如下判断，进行路由跳转。
基于VUE实现判断设备是PC还是移动端
10-15
主要介绍了基于VUE实现判断设备是PC还是移动端,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue后台管理之动态加载路由的方法
10-18
主要介绍了vue后台管理之动态加载路由的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue addRoutes路由动态加载操作
10-14
主要介绍了vue addRoutes路由动态加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue同一项目适配不同平台（PC端和移动端）
热门推荐
qq_37800258的博客
03-26 1万+
同一项目适配不同平台，包括PC端和移动端 PC端项目做完之后，就要开发移动端了，由于项目较复杂，且PC和移动端仅有界面不一样，数据和要实现的功能都是一样的，所以需要在同一个项目中做适配。 同一项目PC端和移动端适配有两种方案： 路由适配   路由适配就是在路由导航守卫中判断设备，然后根据设备进入不同的程序入口，但是这种方案有一个缺点，我在PC端输入移动端的地址会怎样？不能进入移动端的页面，所以还要根据设备针对另一平台做路由拦截。   路由适配可以参考下面这篇博客：   https://blog.csdn
基于Vuejs的在线考试系统学生端
08-10
基于Vue.js的在线考试系统学生端
VUE识别访问设备是pc端还是移动端
weixin_42966151的博客
02-06 6730
有些网站需要区分手机端网页和pc端网页，做到不同设备访问不同的网页，增强用户的使用体验，可以在app.vue中作一个判断，然后跳转不同的路由。
Vue根据不同设备跳转不同路由
枫陵的博客
02-01 918
其中design为PC端跳转路由，design3为非移动端跳转路由。如何是非PC端设备跳转design3,移动端设备跳转design。
vue nuxt判断是pc端还是移动端，分别跳转不同页面
dt517311的博客
08-10 7695
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判断从不同页面跳转到当前页面的路由地址
machine_vision123的博客
05-24 282
日常项目中经常会出现这种效果 点击添加和编辑 跳转至 编辑页活添加页后，通过保存 el-tab-pane这个组件还是要指向原来的地方 方法一、通过beforeRouteEnter实现(此方法可实现需求)但是要注意哦 beforeRouteEnter是不能访问this的 解决方法如下 beforeRouteEnter(to, from, next) { next(vm =&gt...
vue中判断设备切换PC或移动端
a2014528883的博客
11-08 1235
vue中判断设备切换PC或移动端
vue前端判断当前是PC端还是手机端，跳转不同页面
qq_41883689的博客
03-23 2939
一、html <div class="container"> <template v-if="ismOrpc == 'PCoperation'"> <basic-info></basic-info> </template> <template v-else> <mo-basic-info></mo-basic-info> </template> </d
vue router自动根据移动端,PC端开启不同页面
fanlao4203的博客
07-10 1557
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.js怎么在路由中判断PC端和移动端
weixin_38996069的博客
03-18 2087
PC端路由代码 /** * 验证 */ router.beforeEach((to, from, next) =&gt; { if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = '/p_index.html#/' return ...
vue3 动态路由实现路由懒加载
最新发布
08-25
Vue 3 中实现路由懒加载的方式与 Vue 2 有一些不同。在 Vue 3 中，我们可以使用异步组件和动态导入来实现路由懒加载。 首先，需要确保你的项目中已经安装了 `@vue/cli` 的最新版本。然后，在创建路由时，可以按照...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值