Webpack实现路由懒加载的三种方式
原文指路:https://blog.csdn.net/qq_37540004/article/details/78727063
第一种:
引入方式(正常引入):
const router = new Router({ routes: [ { path: '/hyh', component: hyh, name: 'hyh' } ] })
第二种:
const router = new Router({ routes: [ { path: '/index', component: (resolve) => { require(['../components/index/index'], resolve) // 这里是你的模块 不用import去引入了 } } ] })
第三种: 官方推荐
// r就是resolve const list = r => require.ensure([], () => r(require('../components/list/list')), 'list'); // 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 const router = new Router({ routes: [ { path: '/list/blog', component: list, name: 'blog' } ] })
介绍一种管理路由的方式
// 定义一个路由的数组 类似于白名单黑名单
const defaultRouterArr = ['/list/share']
router.beforeEach((to, from, next) => {
// 如果匹配到这个数组
if (defaultRouterArr.indexOf(to.path) >= 0) {
// 执行各种操作 比如让他去登录 不让她进去等等 通过next方法来控制 详细参考vue路由
next()
} else {
next()
}
})