vue中管理系统首页改造pc端和移动端都能显示自适应

做了很久的管理系统，本次版本突然说首页要在移动端也能展示为自适应的登录，所以进行了一些改造：
判断当前设备是手机端或者pc端，根据设备展示页面 在项目中经常会遇到支持 pc端 与手机端的需求。但是 pc
端和手机端尺寸差距很大，一个文件很难实现这种需求。 这个时候就需要判断当前的设备，根据设备来跳转不同的路由。

项目 router 文件夹下的 index.js 中有两个路由，分别是 pc 端路由和移动端路由

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/pc-home'
    },
    // pc端的路由
    {
      path:'/pc-home',
      name:'pc-home',
      component:()=>import('@/components/pc/Home')
    },
    // 手机端的路由
    {
      path:'/phone-home',
      name:'phone-home',
      component:()=>import('@/components/phone/Home')
    }
  ]
})

在 App.vue 中判断当前设备进行跳转路由

export default {
  name: "App",
  mounted() {
    if (this._isMobile()) {
      // 跳转至手机端路由
      alert("手机端");
      this.$router.replace("/phone-home");
    } else {
      // 跳转至 pc 端路由
      alert("pc端");
      this.$router.replace("/pc-home");
    }
  },
  methods: {
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
  },
};

根据这种不同的页面，进行适配两套，在移动端以及pc端的展示，成功解决

pc端展示的界面

移动端展示的界面