前言：

在编写vue里的登录注册时
  
  
  
  
  
  
  
 ，我们始终绕不开对导航守卫的使用  
  
  
  
  
  
  
 ，vue-router4.0版里有一些重要更新
 


 


 


 


 


 


 


 
，在这里分享给大家               。

一               、什么是导航守卫？

正如其名
 
 
 
 
 
 
 
，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  。这里有很多方式植入路由导航中：全局的   
   
   
   
   
   
   
  ，单个路由独享的
 

 

 

 

 

 

 

 
，或者组件级的














。

查看以下情形：

点击主页链接时

 

 

 

 

 

 

 
，默认情况下可直接进入指定界面                ，如图
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，但是问题是该跳转的界面是需要用户登录后方可访问的

可设置导航守卫来检测用户是否登录














，如果已登录                       ，则进入后台页 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，如果未登录






















，则强制进入登录页               ，如图

二
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  、导航守卫有哪几种？

1














、全局守卫（3个）

全局前置守卫

每次发生路由的导航跳转时  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，都会触发全局前置守卫














，因此
  
  
  
  
  
  
  
 ，在全局前置守卫中  
  
  
  
  
  
  
 ，程序员可以对每个路由进行访问权限的控制

1 
  
  
  
  
  
  
  
、 使用方式

你可以在

router/index.js 页面中使用

router.beforeEach((to, from, next) => {}) 注册一个全局前置守卫 
  
  
  
  
  
  
  
。 2
  
  
  
  
  
  
  
 、 代码： // router/index.js 页面 router.beforeEach((to, from, next) => { console.log(to, from); next() });

全局解析守卫

1
 


 


 


 


 


 


 


 、 使用方式

你可以用 router.beforeResolve 注册一个全局守卫
  
  
  
  
  
  
  
 。这和 router.beforeEach 类似
 


 


 


 


 


 


 


 
，因为它在 每次导航时都会触发
 
 
 
 
 
 
 
，但是确保在导航被确认之前   
   
   
   
   
   
   
  ，同时在所有组件内守卫和异步路由组件被解析之后
 

 

 

 

 

 

 

 
，解析守卫就被正确调用
 


 


 


 


 


 


 


 。

2 
 
 
 
 
 
 
 
、 代码： // router/index.js 页面 router.beforeResolve((to, from, next) => { console.log(to,from); next() })

全局后置钩子

1
   
   
   
   
   
   
   
 、 使用方式

你也可以注册全局后置钩子

 

 

 

 

 

 

 
，然而和守卫不同的是                ，这些钩子不会接受 next 函数也不会改变导航本身：

2
 

 

 

 

 

 

 

 、 代码： // router/index.js 页面 router.afterEach((to, from) => { console.log(to,from); })

它们对于分析 

 

 

 

 

 

 

 
、更改页面标题               、声明页面等辅助功能以及许多其他事情都很有用 
 
 
 
 
 
 
 
。

2

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 、路由独享守卫（1个）

1














、 使用方式

你可以直接在路由配置上定义

beforeEnter 守卫： 2                       、 代码： // router/index.js 页面（路由规则中） const routes = [ { path: /home, name: Home, component: HomeView, beforeEnter: (to, from,next) => { console.log(to, from); next() }, }, ]

3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 、组件内守卫（3个）

组件内守卫有个三个：路由进入之前beforeRouteEnter
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，路由离开时beforeRouteLeave,页面更新时beforeRouteUpdate

beforeRouteEnter(to, from, next)

1






















、 使用方式

在组件模板中使用,跟methods: {}等同级别书写














，组件路由守卫是写在每个单独的vue文件里面的路由守卫

2               、 代码： // vue 组件内使用 beforeRouteEnter(to, from) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ！ // 因为当守卫执行时                       ，组件实例还没被创建！ },

注意：

在 vue3 中的 setup 函数中是不可以使用 beforeRouterEnter 这个路由守卫的

beforeRouteUpdate(to, from, next)

1
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  、 使用方式

在组件模板中使用,跟 methods: {} 等同级别书写 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，组件路由守卫是写在每个单独的 vue 文件里面的路由守卫

2














、 代码： // vue 组件内使用 onBeforeRouteUpdate((to, from) => { //当前组件路由改变后






















，进行触发 console.log(to); });

beforeRouteLeave(to, from, next)

1 
  
  
  
  
  
  
  
、 使用方式

在组件模板中使用, 跟methods: {} 等同级别书写               ，组件路由守卫是写在每个单独的 vue 文件里面的路由守卫

2
  
  
  
  
  
  
  
 、 代码： // vue 组件内使用 onBeforeRouteLeave((to, from) => { //离开当前的组件  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，触发 alert("我离开啦"); });

三
 


 


 


 


 


 


 


 、导航守卫的三个参数

to：将要访问的路由信息对象 from：将要离开的路由信息对象 next：函数 调用next()表示放行














，允许这次路由导航 调用next(false)表示不放行
  
  
  
  
  
  
  
 ，不允许此次路由导航 调用next({routerPath})表示导航到此地址  
  
  
  
  
  
  
 ，一般情况用户未登录时
 


 


 


 


 


 


 


 
，会导航到登陆界面

提示：

该函数在导航守卫中可出现多次
 
 
 
 
 
 
 
，但是只能被调用一次!!!

四 
 
 
 
 
 
 
 
、如何在 vue3 中使用 beforeRouteEnter

如果你正在使用组合 API 和 setup 函数来编写组件   
   
   
   
   
   
   
  ，你可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫
   
   
   
   
   
   
   
 。 请参考组合 API 部分以获得更多细节
 

 

 

 

 

 

 

 。

具体请看vue-router的官方文档

导航守卫 | Vue Router

方法一
   
   
   
   
   
   
   
 、我们可以在设置路由的时候
 

 

 

 

 

 

 

 
，使用beforeEnter方法拦截

 

 

 

 

 

 

 
，即在router.js中：

{ path: /, name: home component: () => import(@/xxx.vue), beforeEnter: (to, from) => { // 可以在定义路由的时候监听from和to } }

方法二
 

 

 

 

 

 

 

 、我们还可以使用vue2的写法                ，使用选项式api
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，就可以使用beforeRouterEnter这个钩子了

<script> export default { beforeRouteEnter(to, from) { console.log(before router enter, to, from) }, mounted() { console.log(mounted) }, }

五 

 

 

 

 

 

 

 
、模拟登录注册案例

// 模拟是否登录（true为登录














，false为未登录） let token = true router.beforeEach((to, from, next) => { // 判断有没有登录 if (!token) { // 如果没有登录                       ，并且是跳转至登录页 if (to.name == "Login") { // 直接跳转 next(); } else { // 否则直接强制跳转至登录页 router.push(/login) } } else { // 如果已经登录 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，并且不是跳转至登录页 if (to.name !== "Login") { // 直接跳转 next(); } else { // 否则直接强制跳转至上一个页面 router.push(from.path) } } });

总结：

欢迎大家加入我的社区






















，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 Vue3 中 导航守卫 的使用               ，不懂得也可以在评论区里问我或私聊我询问  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，以后会持续发布一些新的功能














，敬请关注 

 

 

 

 

 

 

 
。

我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog