vue路由导航守卫（全局守卫、路由独享守卫、组件内守卫）

路由导航守卫（全局守卫、路由独享守卫、组件内守卫）"/>

vue路由导航守卫（全局守卫、路由独享守卫、组件内守卫）

一共有三种

第一种是全局守卫：

beforeEach 路由进入之前

这个是写在路由的里面的，只有进入这个路由才可以调用

afterEach 路由进入之后

全局后的钩子，钩子不会结束next函数也不会改变导航本身。

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

第二种 组件内守卫：

beforeRouteEnter 路由进入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由离开之前

 beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用},beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}

第三种：

独享守卫

beforeEnter 路由进入之前

有三个参数

to from next

router.beforeEach((to, from, next) => {// to当前要跳去的路由对象// form这是你要离开的路由对象// next结束参数，可以看做一个保安，想过去就得打招呼，不然不让你过。
});

author：ice Sea Love Rain