如何深入理解Vue Router的导航守卫（钩子）原理？

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

在Vue项目中，要求用户在页面访问前先登录，或离开页面时弹出提醒。Vue官方提供的路由管理器vue-router，结合导航守卫功能，可确保导航的安全性。以下总结了路由守卫的使用：

使用路由守卫保护导航：

1.登录前必须登录。

2.离开页面时弹出提醒。

在做vue项目的时候，要求用户在页面访问前先登录，或在离开页面前发出提醒。vue官方提供的路由管理器 vue-router 提供的导航钩子，通过跳转或取消的方式守卫导航。以下总结了路由钩子函数的使用方法和一些使用场景。

一、全局守卫

router.beforeEach 路由改变前的钩子

const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... })

其中：

• to：将要访问的路径
• from：代表从哪个路径跳转来的
• next：是一个函数，表示放行。有如下几种调用方式
  • next()：如果一起正常，则调用该方法进入下一个钩子；
  • next(false)：中断当前导航，即路由地址不发生变化；
  • next('/xxx') 或 next({path: '/xxx'})：强制跳转到指定路径；
  • next(error)：如果传入的是一个Error实例，则导航会被中断且该错误会被传递给 router.onError() 注册过的回调。