vue2实现 pc端 和手机端UI页面不一样的时候，根据屏幕分辨率，切换路由

同一个项目pc端和手机端页面不一样的时候，可以根据屏幕分辨率来切换路由

先看页面效果吧，后面有完整的代码~~~

pc端

 手机端

 

 在router.js路由配置页面：注意要加上   meta:{requiresDesktop:true}

import Vue from "vue";
import Router from "vue-router";
import login from "@/view/login.vue";


// 手机
import slogin from "../view/phone/slogin.vue";

Vue.use(Router);

 const router  =   new Router({
  routes: [
    //pc
    {
      path: "/login",
      name: "login",
      component: login,
      meta:{requiresDesktop:true}
    
    },
    //手机
    {
      path: "/slogin",
      name: "slogin",
      component: slogin,
      meta:{requiresMobile:true}
    },
    
  ]
});
export default router
router.beforeEach((to, from, next) => {
  const isMobile = window.innerWidth < 768 // 设置移动设备的屏幕分辨率阈值
  if (to.matched.some(record => record.meta.requiresMobile) && !isMobile) {
    next('/login') // 如果路由需要移动设备而当前是桌面设备，则跳转到桌面路由
  } else if (to.matched.some(record => record.meta.requiresDesktop) && isMobile) {
    next('/slogin') // 如果路由需要桌面设备而当前是移动设备，则跳转到移动路由
  } else {
    next() // 否则继续正常导航
  }
})

这样就可以实现啦