vue-router的路由守卫，router.foreEach()，router.beforeResolve()，router.afterEach()使用方法

@TOC

一、vue-router是什么？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

二、router.foreEach()

1.写在main.js文件中

常使用在main.js中
因为，当路由发生变化的时候都会触发这个全局事件，但是如果写在某一个组件中的时候，路由变化to的对象是该组件，就不会进入这个全局事件
写在main.js文件中的时候一定要使用next()，不然路由不会跳转
写在组件中的时候，在beforeEach方法不做操作也会跳转路由

代码如下（示例）：

router.beforeEach((to, from, next) => {
    next()
});

2.参数讲解

路由配置

三、router.beforeResolve()

目前看来和beforeEach()没有区别，都可以做同样的操作

四、router.afterEach()

和beforeEach()相比，这个router方法是在路由进入之后触发，并且少了一个参数next()，不需要调用next进入

router.afterEach((to, from) => {})

五、组件的路由守卫beforeRouteEnter

和created和mounted生命周期冲突

beforeRouteEnter(to, from, next) {
    next((vm) => {
    })
  },

总结

good afternoon