导航卫士

导航条主要是通过跳转或者取消来守护导航。在路线导航过程中植入了许多机会：全局的、专用于单个路线的或组件级的。(请记住，参数或查询的更改不会触发进入/退出导航条。您可以通过观察$route对象来处理这些变化，或者使用beforeRouteUpdate的组件内保护。)

好久没写东西了，总觉得少了点什么。~ ~ ~ ~最近刚好在写一个移动项目，遇到了不同条件下如何让同一条链路跳转到不同路由组件的问题。比如人们经常看到手机没有登录就跳转到登录页面，登录后又跳转到个人信息页面。废话不多说，直接上图：

未登录。单击下面的地雷按钮跳转到登录页面

这是在我登录我的帐户后，再次点击我的按钮将跳转到个人信息页面

好了，看到这个效果，今天就来认识一下吧

实现方法

其实我们点击下面的地雷按钮来跳转路线，所以在跳转路线之前需要做一个判断，让这个链接根据不同的情况跳转到不同的路线。这时，我们vue-router里的导航卫士上台了~ ~ ~

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

vue-router提供的导航守护主要用于通过跳转或取消来守护导航。在路线导航过程中植入了许多机会：全局的、专用于单个路线的或组件级的。

官方文件中明确表示我们可以使用路由器。在每个人注册全球前线卫士之前：

在路由器文件夹下的index.js中添加以下代码

router.beforeEach((to，from，next)={ //.})

以下是路由器每个参数的简要说明。

“to”:是要输入的目标路由对象；(该对象包含名称、参数、元等属性。)

从' :当前导航即将离开路由对象；(该对象包含名称、参数、元等属性。)

“next”: function :确保调用下一个方法，否则钩子不会被解析。也可以传递一些参数，可以在官方文档中找到。

我们在代码中做了一个if(to . name==' Mine ')的判断，也就是说当我们要跳转到的路由对象是Mine的时候，我们会进入导航守护判断条件，当我们点击其他链接跳转到其他页面的时候，是正常的，因为我们只有两种情况对应Mine按钮链接。

//转到用户详细信息页面if(local storage . getitem(' userid '){ router . replace('/myinfo ')}当用户点击我的时候，我们需要判断用户是否登录。因为之前用户登录的时候我把用户的userID保存在localStorage中，所以我只需要判断localStorage中是否有用户的userID就可以判断用户是否登录了。这里有两种情况，不登录登录页面，登录个人信息页面

嗯，通过简单的配置和使用，我们可以根据不同的情况愉快地实现路由和跳转到不同的组件~

哈哈，很简单。欢迎大家交流学习前端知识。我会在GitHub等你~

解释

因为文章是下班后写的，可能比较匆忙，有一些错别字或者语法等低级错误。请留言指出，谢谢。

同时可以在GitHub上一起交流~ ~ ~

GitHub，走

摘要

以上是边肖介绍的vue路由器导航卫士(router.beforeEach())使用的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！