vue 项目适配PC和移动端配置 （两套代码）
1.首页的配置：
首页用重定向的方式来进行适配的方案：` const redirectPath = /Android |webos | iphone iPod BlackBerry liPad/i. test (navigator.userAgent) ? '/m_index' : '/p_index';
const routes = [
{
path: ‘/’,
redirect:redirectPath
}]`
2. 路由的配置
需要注意的是将Pc端和移动端用统一的标示，例如：Pc端使用“p_”开头来命名，移动端用“m_”开头。
{path: '/m_index',name: 'm_index',component: () => import('../views/About.vue'),meta:{type:'mobile'},children:[{ path:"/m_text1",name:"m_text1",component: () => import('../views/mobile/m_text1.vue'),meta:{"type":'mobile'},},{ path:"/m_text2",name:"m_text2",component: () => import('../views/mobile/m_text2.vue'),meta:{"type":'mobile'},}]},{path: '/p_index',name: 'p_index',component: () => import('../views/Home.vue'),meta:{"type":'pc'},children:[{ path:"/p_text1",name:"p_text1",component: () => import('../views/pc/p_text1.vue'),meta:{"type":'pc'},},{ path:"/p_text2",name:"p_text2",component: () => import('../views/pc/p_text2.vue'),meta:{"type":'pc'},}]}
3.全局守卫的配置：
router.beforeEach((to, from, next) =>{//当移动端试图访问pc端页面时if (/Android |webos| iPhone |iPod| BlackBerry | iPad/i.test(navigator.userAgent) && to.meta.type != 'mobile' ){const routers = router.options.routes.filter(v => v.name === 'm_index')[0].children;let path =""routers.filter((item)=>{if(item.name.split('_')[1] === to.path.split('_')[1]){path = item.path}})if (path) { next(path);}else{next('/');} } //当pc端页面试图访问移动端页面时if (!/Android | webos | iPhone | iPod | BLackBerry | iPad/i.test(navigator.userAgent) && to.meta.type !== 'pc'){const routers= router.options.routes.filter(v => v.name === 'p_index')[0].children;let path =""routers.filter((item)=>{if(item.name.split('_')[1] === to.path.split('_')[1]){path = item.path}})if(path){ next(path);}else { next ('/');} }next();});
