首页Vue-router 导航守卫有哪些

Vue-router 导航守卫有哪些

时间: 2023-11-10 09:25:06 浏览: 57

详解vue-router的导航钩子(导航守卫)

5星 · 资源好评率100%

在做vue项目的时候，要求用户在页面访问前先登录，或在离开页面前发出提醒。vue官方提供的路由管理器 vue-router 提供的导航钩子，通过跳转或取消的方式守卫导航。以下总结了路由钩子函数的使用方法和一些使用场景。一、全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中： to：将要访问的路径 from：代表从哪个路径跳转来的 next：是一个函数，表示放行。有如下几种调用方式

Vue-router 导航守卫分为三种： 1. 全局导航守卫：beforeEach、beforeResolve 和 afterEach； 2. 路由独享的守卫：beforeEnter； 3. 组件内的守卫：beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。全局导航守卫可以在全局配置中设置，路由独享的守卫可以在单个路由配置中设置，组件内的守卫可以在组件中设置。这些导航守卫可用于在路由切换时进行权限验证、数据预取等。

阅读全文