教你实现pc移动端两套代码拆分

高山仰止、景行行止

已于 2023-06-14 10:45:22 修改

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端框架

于 2023-06-14 10:41:33 首次发布

本文链接：https://blog.csdn.net/weixin_56527169/article/details/131202341

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了在移动互联网时代处理PC和移动端兼容性问题的常见方法，如媒体查询、双套样式等。然后提出了一种基于Vue的解决方案，通过创建Pc和Mobile文件夹，拆分路由表，根据屏幕宽度或设备型号动态加载不同路由，从而实现PC和移动端的交互与布局差异化管理。这种方法适用于处理页面较多且注重用户交互的项目。

摘要由CSDN通过智能技术生成

在现在移动互联网的时代，在项目中我们通常会遇到需要解决pc和移动端同时兼容的问题。

常见的方法一般通过以下来实现

1.设置媒体查询，通过设置最小宽度来控制页面

2.通过书写两套不同的样式来实现pc和移动不一样的布局

3.通过设置宽度百分比

........

以上几种，相信大家都有遇到过，但是pc和移动端除了布局，往往交互都相差很大，又要保证布局，又要保证交互的情况下，那么以上几种，明显就不好控制了，而且上面的几种方法，如果只是用来处理一些页面较少。不太注重用户交互的时候还是挺方便的，但是如果页面一多起来，那么我们需要去写大量的css来兼容。下面教你如何实现pc，移动拆分。

1.首先我们搭建一个vue项目，后在src下新建Pc，Mobile,两个文件夹，其他都可公用。

找到App.vue这个文件，这个文件是整个项目的入口页面，通过router-view浏览主页面，那么我们就采取将路由表拆分成两个，pc和移动路由。

通过实时监听屏幕宽度来区分pc还是移动端

当然也可以通过判断设备型号来判断是pc还是移动端

function isMobile() {
    let userAgentInfo = navigator.userAgent;
    let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
    let getArr = Agents.filter(i => userAgentInfo.includes(i));
    return getArr.length ? true : false;
  }
const res = isMobile()

如果是pc端，就走pc的路由，是移动端就走移动端的路由，那么找到路由文件

建立两个路由表,然后判断是pc还是移动走哪个路由，我们可以看到如果屏幕宽度小于758，就把移动路由表赋给routes，否则就走pc路由表。

定时器是用来一直拉窗口大小来节流的

var routes = [];
const screenWidth = ref()
screenWidth.value = document.body.clientWidth
if (screenWidth.value <= 758) {
  console.log('is Mobile');
  routes = routerMb
} else {
  routes = routerPc
}
window.onresize = () => {
  screenWidth.value = document.body.clientWidth;
}
watch(screenWidth, (newVal, oldVal) => {
  let timer = setTimeout(() => {
    if (newVal <= 758) {
      console.log('is Mobile');
      routes = routerMb
      window.location.reload()
    } else {
      routes = routerPc
      window.location.reload()
    }
    // 重绘页面
  }, 500)
  return () => {
        clearTimeout(timer)
    }
}, {
  deep: true,
})
const router = createRouter({

  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由发生变化，页面自动滚动到顶部
  scrollBehavior() {
    return { left: 0, top: 0 }
  },
  routes
})

export default router