Vue.js note15（导航守卫&eslint不验证此行&买服务器）

路由守卫/导航守卫

vue项目中经常在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。而这种需求可以用通过路由守卫（或者叫导航守卫，以下皆称导航守卫）来实现。

“导航”表示路由正在发生改变。

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 官方—写的很清晰

（一）导航守卫—全局前置守卫

当一个导航触发时，全局前置守卫(在进入组件之前)，按照创建顺序调用。

vue-router 提供的 router.beforeEach((to,from,next)=>{})可以方便地实现全局前置导航守卫：

• to：即将要进入的目标 路由对象
• from：当前导航正要离开的路由
• next：下一步执行

然后我发现，next()一定要加。

（一）全局解析守卫

2.5.0 新增

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和router.beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

（二）导航守卫—全局后置钩子

当一个导航触发时，全局后置钩子(在进入组件之后)，调用。

vue-router 提供的 router.afterEach((to, from) => {})实现全局后置守卫

• to：即将要进入的目标 路由对象
• from：当前导航正要离开的路由

（三）导航守卫—路由独享的守卫

与全局前置守卫相比，路由独享守卫只对当前路由进行单一控制，参数与全局前置守卫相同。

你可以在路由配置上直接定义 beforeEnter 守卫：

（四）导航守卫—组件内的守卫

组件内守卫只会对当前组件生效。

• beforeRouteEnter 在进入组件前调用
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave 离开路由之前

1、beforeRouteEnter

在组件中使用beforeRouteEnter(to, from, next) {}来使用进入组建前的钩子。

2、beforeRouteLeave

在组件中使用beforeRouteLeave(to, from, next) {}来使用离开组件的钩子。

（五）路由知识点扩展—数据获取

进入某个路由后，需要从服务器获取数据。

例如，在渲染用户信息时，需要从服务器获取用户的数据。这时我们可以通过两种方式来实现：

1. 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。
2. 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

（六）完整的导航解析流程

---

eslint不验证此行

---

买服务器

买的百度的：https://cloud.baidu.com/campaign/Promotionai/index.html?track=cp:npinzhuan|pf:pc|pp:npinzhuan-biaoti|pu:wenzineirong|ci:|kw:10014512

然后注册账号，可以用百度账号登录。

买完按流程走，然后可以使用flashFXP 5这个工具来传输文件。