Webpack实现路由懒加载的三种方式

Webpack实现路由懒加载的三种方式,第1张

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

}

})

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/586826.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存