如何在Vue Router中应用中间件

中间件是咱们在软件开发中的一个古老而强大的概念，当咱们在应用程序中使用路由相关模式时，它很是有用。

若是您不太了解中间件的含义，Nodejs框架Express里的中间件能够帮助您了解它们的工做原理。

可是，中间件仅适用于后端吗？

不，当应用程序中有路由时，中间件在前端或后端中就会很是常见。好比如今流行的单页应用程序。

有一些示例能够说明，什么时候可使用中间件：

不容许未登陆用户访问您的网页。
仅容许某些类型的用户查看页面（角色：管理员，做者等）
数据采集。
重置设置或清理存储空间。
限制访问用户的年龄。
还有一些......

那么如何在Vue中使用中间件？

感谢Vue Router，这将很是简单！由于这个插件实现了一个相似的概念，称为“导航守卫”。

导航守卫真的很棒，让咱们在进入路由以前，更新以前和离开以前，能够执行一些代码逻辑。

还可使用全局守卫。

但有时咱们须要多个中间件用于同一路由，咱们能够用Vue Router Multiguard包解决问题。这容许咱们设置一系列守卫，以下所示：

在上边示例中能够看到，经过Vue Router Multiguard，在路由配置中应用中间件很容易。让咱们再看一个简化的例子：

首先，咱们定义一个模拟用户。而后假设您有一个服务，能够从全局state或其余地方得到当前用户的数据。

如今，咱们能够用中间件建立咱们的“真实”示例：

---

PS：

1.Vue Router还有组件内的守卫

* beforeRouteEnter

* beforeRouteUpdate (2.2 新增)

* beforeRouteLeave

其中beforeRouteEnter，很适合在进入页面以前去获取数据。

2.若是你阅读了文档，你会发现你能够将下一个路由传递给 next() 函数，例如重定向到 login - next('/login')