Vue router 实现页面组件自动加载

使用Vue全家桶开发项目已经是目前前端标配的做法。在使用vue-router实现单页应用组件路由时，我们需要将页面组件 import 进去，再注册路由，这样才可以实现路由的访问，下面是一个典型的vue-router使用方法：

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

// Import pages component
import Index from '@/pages/Index'
let routes = [{
    path: '/',
    component: Index
}];

const router = new Router({
  routes
});

export default router;

然而，当我们的项目具有很多页面时，我们每次都要在路由数组中引入新组件，这种方法显得十分麻烦，而且在做后台管理系统时，对页面权限控制也不是很灵活。

我们希望可以在访问某个页面时，如访问 host/#/oa/event/ 时，可以先判断用户角色是否具有访问权限，没有则显示 403 页面，有权限则尝试自动加载 src/pages/oa/event/index.vue 文件，加载成功后显示该页面，加在失败则显示 404 页面。

这一切操作的核心，都通过 vue-router 提供的全局前置守卫方法 router.beforeEach 来实现。

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

// Import pages component
import Index from '@/pages/Index'
let routes = [
    {
        path: '/',
        component: Index
    },
    { 
        path: '*', // 当匹配不到任何路由时，显示404页面
        component: component: () => import('@/pages/404.vue')
    }
];

// 创建 router 实例
const router = new Router({
  routes
});

// 实现自动加载的核心，通过 全局前置守卫方法 router.beforeEach
router.beforeEach((to, from, next) => {
  // 如果matched 到的第一个路由地址为 '*', 说明该路径未注册
  if (to.matched[0].path == '*') {
    // 生成目标页面组件的文件路径，这里自动给路径前加上斜杆 '/'
    const loadPagePath = (to.path.substr(0, 1) == '/') ? `${to.path}` : `${to.path}`;

    // 尝试引入目标页面组件
    // 这里需要注意的是：webpack在处理import时并不支持传入变量，但可以使用 `` 字符串模版来实现
    // 还有一点要注意的是，在import的时候，不能全部使用变量，前面要有一部分路径信息才行，
    // 像下面保留 @/pages 路径，在编译时，会编译 pages 下全部模块，否则提示模块不存在。
    import(`@/pages${loadPagePath}`)
      .then((page) => {
        // console.dir(page); // 若加载成功，page是一个 Vue 组件 Object

        // 生成新的路由数组信息
        let newRoute = [
          {
            path: to.path,
            component: Layout,
            children: [
              {
                path: to.path,
                component: () => import(`@/pages${loadPagePath}`)
              }
            ]
          }
        ]
        // 追加新路由
        router.addRoutes(newRoute)
        // 重新转跳到目标页面，注意，这里要用 fullPath，如果用path会导致链接中的query参数丢失
        router.push(to.fullPath)
      })
      .catch((err) => {
        console.log(err)
        next(); // call next() to redirect to 404 page.
      })
  } else {
    // 这里可以用来处理其他路由拦截操作
    next(); // 要调用 next() 方法才能进入下一步，否则路由会一直处于被拦截状态
  }
})

export default router;

这样，我们把页面组件放在 @/pages 目录下，便可以实现像文件系统路径一样来访问对应的页面，而不需要每次新增页面的时候都修改路由文件。

Vue router 实现页面组件自动加载

Vue router 实现页面组件自动加载

References