Vue-router导航守卫如何实现长尾词的动态路由匹配？

本文共计1436个文字，预计阅读时间需要6分钟。

当创建Vue-cli项目时，需要在路由跳转前进行一些验证，例如登录验证。这是网站中常见的需求。

对此，vue-router提供的beforeEach钩子可以方便地实现全局导航守卫（navigation guards）。组件内部的登录验证等操作，可以通过在路由配置中使用beforeEach钩子来实现。

当做Vue-cli项目的时候需要在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。

对此，vue-router 提供的 beforeEach可以方便地实现全局导航守卫（navigation-guards）。组件内部的导航守卫函数使用相同，只是函数名称不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。

钩子(Hook)，早期编程可能有个概念叫句柄，不知道将两者类比而且强行归为一类是不是合适。钩子的用处是在某个特定流程中的不同时机暴露出一些函数，使得用户可以通过覆写这些函数实现在原有位置执行自己的代码逻辑的功能。

1. 分类

vue-router中的导航钩子按定义位置不同(执行时机也不同)分为全局钩子、路由级钩子和组件级钩子。