vue中一个项目里兼容移动端和pc端

清疚 2022-12-22 08:47 226阅读 0赞

话不多说，上代码

先来看一下我的文件

![在这里插入图片描述][20201118181031868.png_pic_center]

**路由文件 index.js：**

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({ 
      mode:"history",
      routes: [
        // pc端
        { 
          path: '/',
          name: 'pc/home',
          component: ()=>import("@/components/pc/home"),
        },
        // 手机端
        { 
          path: '/mobile/home',
          name: 'mobile/home',
          component: ()=>import("@/components/mobile/home"),
        },
      ]
    })

**在app.vue中**

mounted(){ 
        if (this._isMobile()) { 
          // 手机端
          this.$router.replace("/mobile/home");
        } else { 
          // pc端
          this.$router.replace("/");
        }
    },
    methods：{ 
     _isMobile() { 
          let flag = navigator.userAgent.match(
         /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
          );
          return flag;
        },
    }

[20201118181031868.png_pic_center]: /images/20221120/bd00e43fce974cb786cbdb76eb1e09dc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 判断是否function_vue 项目判断是PC端还是移动端

这些js可以另外建一个.js的文件来写，到时候导出使用有关浏览器类型的信息都藏在USER-AGENT里面，首先读取navigator.userAgent里面的信息，为了方便

骑猪看日落/ 2023年01月08日 06:27/ 0 赞/ 408 阅读

相关 vue中一个项目里兼容移动端和pc端

话不多说，上代码先来看一下我的文件 ![在这里插入图片描述][20201118181031868.png_pic_center] 路由文件 index.js：

清疚/ 2022年12月22日 08:47/ 0 赞/ 227 阅读

相关 Vue PC端框架和Vue移动端UI框架

在学习Vue的过程之中，我发现不管是 BAT 大厂，还是创业公司，Vue 都有着广泛的应用，而且框架层出不穷，学习文档也越来越多，Vue也越来越受欢迎。下面是我整理的 Vue

朱雀/ 2022年12月06日 04:25/ 0 赞/ 354 阅读

相关 H5项目兼容PC端和移动端的方案(持续跟新)

文章目录一、利用CSS媒体查询维护两套样式拓展-媒体查询二、移动端1像素线问题三、移动端 H5 滑动穿透四、适配深色模式

电玩女神/ 2022年10月22日 07:53/ 0 赞/ 505 阅读

相关 js实现一个可以兼容PC端和移动端的div拖动效果

前段时间写了一个简单的div拖动效果，不料昨天项目上正好需要一个相差不多的需求，就正好用上了，但是在移动端的时候却碰到了问题，拖动时候用到的三个事件：`mousedown`、`

女爷i/ 2022年07月14日 12:22/ 0 赞/ 230 阅读

相关 javaweb区分PC端和移动端

原文：https://blog.csdn.net/xiaoxian8023/article/details/37527133 欢迎访问我的个人博客 [http

分手后的思念是犯贱/ 2022年03月21日 14:46/ 0 赞/ 609 阅读

相关 PC端和移动端测试区别

![1429062-20190607002613535-306654754.png][] 转载于:https://www.cnblogs.com/Chamberlain

野性酷女/ 2021年12月22日 23:03/ 0 赞/ 598 阅读

相关 pc端和移动端的区别

1、操作方式不同 PC端的操作方式与移动端已经有了明显的差别，PC端使用鼠标操作，操作包含滑动、左击、右击、双击操作，操作相对来说单一，交互效果相对较少。而对于手机端来说

Bertha 。/ 2021年11月08日 17:52/ 0 赞/ 560 阅读

相关 vue搭配的UI框架 pc端 + 移动端

PC桌面端UI框架： 1，iview （最新，用户评分高功能多炫酷解决和避免了其他UI框架出现的一些小问题） 2, bootstrap （使用用户最多样式死板

淡淡的烟草味﹌/ 2021年11月01日 08:56/ 0 赞/ 593 阅读

相关 vue移动端项目中实现一个树

最近公司使用vue开发手机端项目，有个需求是实现派发树，网上找了半天没找到合适的。决定自己撸一个试试，要求多层级，层级不定而且。正文 treeMenu.vue文件

拼搏现实的明天。/ 2021年09月18日 08:32/ 0 赞/ 667 阅读