Vue路由懒加载&&路由守卫

最新推荐文章于 2026-06-20 16:24:21 发布

原创最新推荐文章于 2026-06-20 16:24:21 发布 · 561 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

前端框架同时被 2 个专栏收录

16 篇文章

订阅专栏

Vue

11 篇文章

订阅专栏

本文介绍了如何在前端开发中使用webpack实现路由组件的懒加载，以优化应用性能。同时探讨了路由守卫的使用方法，包括前置守卫的实现方式及如何进行权限验证。

路由懒加载

有时候有些路由下的组件需要打包在同个异步块（chunk）中，使用webpackChunkName 语法

使用懒加载，

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

路由守卫

前置守卫

to 要去哪（路由）
from 从哪来（路由）
next 放行函数

// 路由白名单
let arr = ['/home', '/home/users']
router.beforeEach(function(to,from,next){
	if (arr.indexOf(to.path) !== -1){
		// 需要验证权限，才能访问
		const token = localStorage.getItem('token')
		if (token) {
			// next() 等于放行
			next()  
		} else{
			// next('/login') 写路由，就等于跳转
			next('/login')
		}
	} else{
		// 不需要权限也可以放行
		next()
	}
})