vue前端判断当前是PC端还是手机端，跳转不同页面

最新推荐文章于 2024-03-11 16:01:02 发布
VIP文章 最新推荐文章于 2024-03-11 16:01:02 发布
阅读量2.9k 收藏 10
点赞数 1
分类专栏： Vue.js 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41883689/article/details/115146032
版权

一、html

<div class="container">
  <template v-if="ismOrpc == 'PCoperation'">
     <basic-info></basic-info>
   </template>
   <template v-else>
     <mo-basic-info></mo-basic
最低0.47元/天 解锁文章
Elaine Cc
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
新手第一次写vue来判断移动端和PC端
weixin_43946728的博客
02-14 1万+
新手第一次写vue来判断移动端和PC端 1.搭建vue脚手架我就不多说了 vue init webpack 文件名。 2.运行npm run dev。 3.在APP文件中。 我用的是定义一个变量为showPage，通过v-if来进行判断，如果showPage等于1的情况下，那么 则会显示为手机端，如果为showPage==2的情况则为PC端。下面的admin可以忽略点，因为我是 一个vue脚手架...
vue如何在一个工程里判断h5还是pc，（利用在一个页面显示不同router-view内容原理，本文只使用于单页面项目，多页面项目请查看我另一篇博文）
qq_37816525的博客
06-06 1835
vue如何在一个工程里判断h5还是pc app.vue <template v-if='showBol()'> <router-view /> </template> <template v-else> <!--这里的name不是命名路由时的name，是components对象里的key--> <router-view...
VUE识别访问设备是pc端还是移动端
weixin_42966151的博客
02-06 6653
有些网站需要区分手机端网页和pc端网页，做到不同设备访问不同的网页，增强用户的使用体验，可以在app.vue中作一个判断，然后跳转不同的路由。
Vue判断页面是在手机端还是PC端
最新发布
qq_59626859的博客
03-11 303
当在pc端的时候就正常显示页面，当在手机端的时候就跳转小程序；即PC端和移动端的处理场景不一样。
SpringBoot整合vue-admin-template实现登录
liu320yj的博客
11-04 9640
vue-admin-template简介 前后端分离开发模式越来越受开发人员的喜爱，开源项目vue-admin-template 是一个后台前端解决方案，它基于 vue 和 element-ui实现。更多详情请阅读vue-template-admin官网，vue-admin-template项目是其基础模板，本文基于vue-admin-template实现与SpringBoot的整合 SpringBoot整合vue-admin-template ...
2、前后端对接，vue-admin-template前端的操作
weixin_53920301的博客
12-14 146
alwaysShow：如果这个模块只有一个子菜单，需要使用alwaysShow：true，可以显示父级列表。不使用这个语句就会只显示子列表菜单，而不显示父菜单。Spring早就给我们提供了解决方案，我们只需要在对应controller上添加一个注解就可以了（@CrossOrigin // 跨域）。url：访问后端方法的路径以及对应的参数，路径参数需要使用${}定义。跨域问题：浏览器对于javascript的同源策略的限制。2、在src/router中定义路由规则。1、前端对接后端提供的接口功能，
vue-admin-template模板的使用
m0_52933282的博客
06-22 310
简单前端框架（vue-admin-template）的搭建
基于VUE实现判断设备是PC还是移动端
10-15
主要介绍了基于VUE实现判断设备是PC还是移动端,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue判断设备是手机端还是pc端
weixin_46413834的博客
08-16 5651
router.js routes: [ { path: '', redirect: '/pc_index' }, { path: "/pc_index", // pc端首页 name: PcIndex, component: PcIndex }, { path: '/m_index', // 手机端首页 name: MIndex, component: MIndex
判断当前终端是手机还是pc端并进行不同的页面跳转
qq_26173001的博客
05-27 910
DEMO 1 （亲测实用） <script type="text/javascript"> function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipa...
js判断移动端还是pc端
热门推荐
刻痕
06-27 1万+
判断是否是pc端还是移动端，网络方案：方案一： 方案二： 方案三： 方案四： 拓展： 智能机浏览器版本信息: 是否是ipad： 判断浏览器是否为IE8以下 是否为IE 参考链接：https://www.cnblogs.com/T8888/p/14603164.html...
vue js判断客户端是pc端还是移动端
08-11
//使用方法 import { isMobile } from '../../xxx/isMobile.js' export default { data(){ return{ispc: isMobile().web.win, } }, } </script>
vue实现PC端分辨率适配操作
10-15
主要介绍了vue实现PC端分辨率适配操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Spring Boot+Vue前后端分离，如何避免前端页面 404
01-08
问题倒不难，但是这个问题之前被...但是在前后端分离中，页面的跳转统统交给前端去做，后端只提供数据，这种时候，权限管理不能再按照之前的思路来。 首先要明确一点，前端是展示给用户看的，所有的菜单显示或者隐藏
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
qq_41883689的博客
12-03 985
一、在components路径下创建IconSvg文件夹 并在IconSvg下创建IconSvg.vue文件、index.js文件 Iconsvg.vue文件代码 <template> <div> <span class="iconfont" :class="iconTag"></span> <slot></slot> </div> </template> <script&g
vue.js---i18n的使用
qq_41883689的博客
08-05 861
标签属性 :placeholder="$t('pleaseSelectHint')" 口诀：加冒号，$t('') 标签内 <a-button>{{ $t('delete') }}</a-button> 口诀：加双大括号，$t('') .vue文件中js代码中的调用 this.title = this.$i18n.tc('createTask') 口诀：this.$i18n.tc('') .js文件里调用 import i18n from '@/locales' /
Symbol方式封装iconfont图标组件
qq_41883689的博客
10-30 788
一、创建IconSvg组件 IconSvg.vue <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export default { name: "IconSvg", props: { ico
vue前端开发项目搭建
qq_41883689的博客
10-27 300
对于大型的项目，我们一般用Vue CLI也就是脚手架来搭建项目。所以，以下是用vue搭建前端开发项目的主要过程： 1、安装NodeJs 可以直接在官网下载安装 网址：https://nodejs.org/zh-cn/ 2、安装npm，或配置淘宝镜像cnpm 在安装NodeJS的时候，npm就顺带被安装进去了 如果下载网速太慢的话，请配置淘宝镜像cnpm （具体安装方法，请参见https://blog.csdn.net/qq_41883689/article/details/109310557） 3、安装
vue 如何保证手机端和pc访问的页面格式不同
08-30
在Vue中，可以通过使用媒体查询和响应式设计来保证手机端和PC访问的页面格式不同。 媒体查询允许我们根据设备的屏幕大小和其他特性，对页面的样式进行不同的处理。我们可以在Vue的组件中使用媒体查询，根据不同的设备条件，动态地改变组件的样式。 首先，在Vue的组件中，可以使用CSS的@media规则来定义媒体查询。通过在组件的样式中，根据设备的屏幕大小和方向等属性，设定不同的样式。 例如，在手机端可以使用媒体查询来设置底部导航栏的样式： ``` <style scoped> @media screen and (max-width: 600px) { .bottom-navigation { display: flex; justify-content: space-around; position: fixed; bottom: 0; width: 100%; height: 50px; background-color: lightgray; } } </style> ``` 在PC端可以使用媒体查询来设置顶部导航栏的样式： ``` <style scoped> @media screen and (min-width: 601px) { .top-navigation { display: flex; justify-content: space-around; width: 100%; height: 50px; background-color: gray; } } </style> ``` 另外，Vue还提供了响应式设计，可以根据不同的设备尺寸，加载不同的组件或布局。可以使用Vue的内置响应式工具Vuetify，来为不同设备尺寸设置不同的组件，或使用Vue的动态组件功能，根据不同的设备尺寸加载不同的组件。 结合媒体查询和响应式设计，我们可以根据设备类型，动态地改变Vue组件的样式和布局，从而保证手机端和PC访问的页面格式不同。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值