技術標籤：vue的學習vue

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();
  }
  );