vue2路由导航守卫(钩子函数)

所谓的Vue路由导航守卫,也就是我们常说的生命周期钩子函数,钩子函数的意思就是在特定的时刻,Vue会自动触发这个方法,我们可以通过这些个钩子函数,实现一些功能,比如,某些页面需要登录后才可以访问,某些页面需要用户达到什么等级才可以访问,又或者是跳转页面后修改一些信息等等,我们就可以通过路由导航守卫来拦截并做相应的处理

全局守卫:

挂载在router实例上

全局前置钩子

注意:参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

官方对于next()的解释:

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home‘ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

  • 全局后置钩子:

注意:这些钩子不会接受next函数,也不会改变导航本身

局部钩子函数

局部钩子函数可以写在两个地方,一个是写在组件对应的路由配置中,一个是直接写在组件中

路由独享的守卫:

可以在路由配置上直接定义beforeEnter守卫:

组件内的守卫:

  1. beforeRouteEnter
  2. beforeRouteUpdata(2.2新增)
  3. beforeRouteLeave

beforeRouteEnter 守卫不能访问this,因为守卫在导航确认前被调用,因此即将登场的新组建还没被创建

可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数

仅供参考 。

原文地址:https://www.cnblogs.com/yangjingyang/p/12311308.html

时间: 2024-10-17 02:27:47

vue2路由导航守卫(钩子函数)的相关文章

vue之路由导航守卫-全局前置守卫

一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 参数: to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子.执行效

挂载路由导航守卫 router

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' import Users from './components/user/Users.vue' import Rights fro

Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... 前端进阶积累.公众号.GitHub Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法

vue路由导航守卫及前置后置钩子函数参数详解

首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' Vue.use(Router) const router = new Router({ routes: [{ path: '/', name: 'HelloWorld', component: resolve => require

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

(转)Vue2.X的路由管理记录之 钩子函数(切割流水线)

$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化)它. 导航和钩子函数: 导航:路由正在发生改变   关键字:路由  变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数) 两者关系: 钩子函数 ---> 导航 :     钩子函数   主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航

Vue2.0 Router 导航守卫

官方文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫 可以使用 router.beforeEach 注册一个全局前置守卫: 例如: 判断在用户未登录时, 跳转到 "/login" 的路由,  登录时,直接跳转到默认路由 const router = new VueRouter({ ... }) // 实例化 router router.beforeEach((to, from, next)

vue-router有哪几种导航钩子( 导航守卫 )?

问题一:vue-router有哪几种导航钩子( 导航守卫 )? 1.全局守卫: router.beforeEach 2.全局解析守卫: router.beforeResolve 3.全局后置钩子: router.afterEach 4.路由独享的守卫: beforeEnter 5.组件内的守卫: beforeRouteEnter.beforeRouteUpdate (2.2 新增).beforeRouteLeave 导航表示路由正在发生改变,vue-router 提供的导航守卫主要用来:通过跳转

导航守卫的理解和使用

1.导航守卫钩子 导航守卫的用途主要是在用户离开页面前提醒用户,和页面访问前先登录.共有7个钩子,其中全局钩子有3个,组件钩子有3个,路由管道钩子有1个. 全局钩子: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...(2) //全局前置守卫 }) router.beforeResolve((to, from, next) => { // ...(6) //全局解析守卫 })