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

刺骨的言语ヽ痛彻心扉 2023-03-03 12:26 24阅读 0赞

### 路由守卫/导航守卫 ###

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

> “导航”表示路由正在发生改变。  
>   
> vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：**全局的**, **单个路由独享的**, 或者**组件级的**。  
>   
> [https://router.vuejs.org/zh/guide/advanced/navigation-guards.html][https_router.vuejs.org_zh_guide_advanced_navigation-guards.html] 官方—写的很清晰

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

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

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

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

![在这里插入图片描述][20200805153847545.png]  
然后我发现，next()一定要加。

##### （一）全局解析守卫 #####

> 2.5.0 新增

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

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

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

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

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

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

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

你可以在路由配置上直接定义 beforeEnter 守卫：![在这里插入图片描述][20200805141913891.png]

##### （四）导航守卫—[组件内的守卫][Link 1] #####

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

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

###### 1、beforeRouteEnter ######

在组件中使用`beforeRouteEnter(to, from, next) {}`来使用进入组建前的钩子。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

###### 2、beforeRouteLeave ######

在组件中使用`beforeRouteLeave(to, from, next) {}`来使用离开组件的钩子。  
![在这里插入图片描述][20200805142023370.png]

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

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

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

--------------------

### eslint不验证此行 ###

![在这里插入图片描述][20200731144007804.png]

--------------------

### 买服务器 ###

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

买完按流程走，然后可以使用flashFXP 5这个工具来传输文件。  
![在这里插入图片描述][20200805155904161.png]

[https_router.vuejs.org_zh_guide_advanced_navigation-guards.html]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
[20200805153847545.png]: /images/20230208/aa74de3d04434ab581596fada9e28efd.png
[20200805141913891.png]: /images/20230208/dc05dac213914ab1acf604720c487b2c.png
[Link 1]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230208/1f0572ee2ff74a0bb1552878058d5d16.png
[20200805142023370.png]: /images/20230208/a00878fba2984629ae1fb5b486298f92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/945de26a336f4ee293eea179b99aa309.png
[20200731144007804.png]: /images/20230208/41f650c910254bdcaad1b40929a5c3d1.png
[20200805155904161.png]: /images/20230208/9af58d7f6fe24ee381919f7c6e7b2da5.png