路由配置及動態路由---vue-router

import routeMap from './router/component.js';
const NotFound = () => import('./page/404.vue');
const formatRoutes = function (routes, routeData) {
  if (!routeData) {
    routeData = {
      name: 'home',
      path: '/home',
      // 組件匹配成功的話纔可以訪問具體的頁面              
      component: routeMap['home'],
      children: [],
    };
  }
  routes.length && routes.forEach(route => {
    if (route.component) {
      route.component = routeMap[route.component];
      routeData.children.push({
        path: route.path,
        name: route.index,
        component: route.component,
        meta: {
          title: route.title,
          // if (route.children && route.children.length) {
          // formatRoutes(route.children, routeData);
          // }
        }
      })
      return routeData;
    };
  })
  let isFetchRemote = true;
  //使用鉤子函數對路由進行權限跳轉    
  router.beforeEach((to, from, next) => {
    const username = sessionStorage.getItem('username');
    if (!username && to.path !== '/login') {
      next({
        path: '/login'
      });
    } else if (isFetchRemote && to.path !== '/login') {
      ajaxPost('/resourceAPI/getMenuData').then(res => {
        if (res.status === 200 && res.data.errno === 0) {
          isFetchRemote = false;
          const menuData = res.data.result;
          localStorage.setItem('menudata', JSON.stringify(menuData));
          const routeData = formatRoutes(menuData);
          resourceApp.$router.addRoutes([routeData].concat([{
              name: '404',
              path: '/404',
              component: NotFound
            },
            {
              path: '*',
              redirect: '/404'
            }
          ]));
          resourceApp.$router.push({
            path: to.path,
            query: to.query
          });
        } else {
          isFetchRemote = true;
        }
        next();
      }).catch(err => {
        console.log(err);
      });
    } else {
      next();
    }
  });
}
const resourceApp = new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章