Vue 路由守卫

路由守卫分为4个

全局守卫

beforeEach(to,from,next)
复制代码

组件内守卫

beforeRouteEnter(to,from,next)

befroeRouteUpdate(to,from,next)

beforeRouteLeave(to,from,next)
复制代码

---

今天我要说的是全局路由守卫

看到守卫后边3个参数了么,有没有觉的好熟悉？

to--就是当前页面路由页面

from-就是准备进去的路由页面
复制代码

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。next是继续或者中止方法 next() 默认跳转 next(false) 中止跳转 next('/') 跳转新的页面

此时我的路由守卫里边没有next（）默认跳转方法,所以页面是不会渲染组件的

确保要调用 next 方法，否则钩子就不会被 resolved。 此时APP是没有加载任何组件的。因为你没有给路由守卫设置默认跳转。所以他不跳转。 至于next（false）大家也应该猜到了我就不写了

---

接下来看到是设置next（）的效果

此时组件页面已经加载进来了，所以不要怀疑自己。

---

接下来看看to和from区别

如有问题请及时反馈，来自一位不断在Vue路上学习的小白