vue架构-如何封装路由

        我看过很多项目路由的封装，大多是将路由放在统一的index.js页面进行保存，使得路由管理不易于后期维护。下面我分享一下路由按需引入封装的思路。主要使用到了require.context()Webpack API引入不同的路由文件。

require.context()官方介绍请看 =》 require.context()介绍

大体思路是将路由管理封装成三层：

案例

• 创建文件，写入每个页面的单独路由

export default{
    path: '/login',
    component: () => import ('@/components/Login.vue')
}   

• 创建文件，使用require.context()将每个页面的单独路由引入

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

let routerList = [];
//将每个页面路由遍历，加入路由数组
function importAll(r){
  r.keys().forEach(item => {
    routerList.push(r(item).default)
  })
};
importAll(require.context('./',true,/\.router\.js/))

const router = new Router({
  routes: [
  //展示每个页面路由
    ...routerList,
  // 通过路由重定向，让用户在访问路径“/”，自动重定向到“/login”
     {
    path: "/",
    redirect: "/login"
     }
  ]
})
export default router

• 创建文件，配置路由权限

import router from './index'

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
    const token = window.sessionStorage.getItem("token");
    if (!token){
        if(to.meta.token){
            return next({
                path: '/login'
            })
        }else{
            next();
        }
    }
    return next("/login");
  })