如何深入理解并运用vue router的router.beforeEach()导航守卫？

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

导航守护+导航守护主要用来通过跳转或取消的方式守护导航。多种机构会植入导航路径中：全局的、单独路径的、或组件级的。（注意参数或查询的改变并不会触发进入/离开）

导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。）

好久没写一些东西了，总是感觉有啥缺少的。~~~~恰好碰到最近在写一个移动端项目，遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题，譬如大家经常看到手机中没登录跳转登录页，登陆后跳转个人信息页等。废话不多说了，直接上图：

这是没登录状态，点击下面mine按钮跳转至登录页

这个是我登录了自己的账号后，再次点击mine按钮会跳转至个人信息页面

好了，看到了这个效果今天咱们来实现下

实现方法

我们点击下面mine按钮其实是路由跳转，所以我们需要在跳转路由之前做一个判断，根据不同的条件让这个链接跳转到不同路由。这时候我们vue-router中的导航守卫就闪亮登场了~~~

先看官方文档： router.vuejs.org/zh-cn/advanced/navigation-guards.html

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