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

路由懒加载

有时候有些路由下的组件需要打包在同个异步块（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()
	}
})