vue学习之，导航钩子

vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。

有三种方式可以植入路由导航过程中：

全局的

单个路由独享的

组件级的

全局导航钩子：

全局导航钩子主要有两种钩子：前置守卫、后置钩子，

注册一个全局前置守卫：

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

这三个参数 to 、from 、next 分别的作用：

to: Route，代表要进入的目标，它是一个路由对象

from: Route，代表当前正要离开的路由，同样也是一个路由对象

next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）
next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会被重置到 from 路由对应的地址
next(‘/’) 和 next({path: ‘/’})：在中断掉当前导航的同时，跳转到一个不同的地址
next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调
注意：next 方法必须要调用，否则钩子函数无法 resolved

对于全局后置钩子：

router.afterEach((to, from) => {// do someting
});

不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身

路由独享的钩子

顾名思义，即单个路由独享的导航钩子，它是在路由配置上直接进行定义的：

cont router = new VueRouter({routes: [{path: '/file',component: File,beforeEnter: (to, from ,next) => {// do someting}}]
});

至于他的参数的使用，和全局前置守卫是一样的

组建内的导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

我们看一下他的具体用法：

const File = {template: `<div>This is file</div>`,beforeRouteEnter(to, from, next) {// do someting// 在渲染该组件的对应路由被 confirm 前调用},beforeRouteUpdate(to, from, next) {// do someting// 在当前路由改变，但是依然渲染该组件是调用},beforeRouteLeave(to, from ,next) {// do someting// 导航离开该组件的对应路由时被调用}
}

需要注意是：

beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this

但是并不意味着在 beforeRouteEnter 中无法访问组件实例，我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认是，会执行这个回调，这时就可以访问组件实例了，如：

beforeRouteEnter(to, from, next) {next (vm => {// 这里通过 vm 来访问组件实例解决了没有 this 的问题})
}
eg:
beforeRouteEnter(to, from, next) {
next(vm => {const pateArr = from.path.split('/')if (pateArr[3] === 'mediaDetail') {vm.mediaSearchForm = JSON.parse(window.localStorage.getItem('mediaSearchForm'))vm.fetchMedia()} else {vm.fetchMedia()}
})

}

注意，仅仅是 beforRouteEnter 支持给 next 传递回调，其他两个并不支持。因为归根结底，支持回调是为了解决 this 问题，而其他两个钩子的 this 可以正确访问到组件实例，所有没有必要使用回调

最后是完整的导航解析流程：

导航被触发
在失活的组件里调用离开守卫
调用全局的 beforeEach 守卫
在重用的组件里调用 beforeRouteUpdate 守卫
在路由配置里调用 beforEnter
解析异步路由组件
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve 守卫
导航被确认
调用全局的 afterEach 钩子
触发 DOM 更新
在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

作者：神圣光
来源：CSDN
原文：https://blog.csdn.net/weixin_41399785/article/details/79382243
版权声明：本文为博主原创文章，转载请附上博文链接！

vue学习之，导航钩子相关推荐

vue学习---生命周期钩子activated，deactivated
之前学习了基础的生命周期钩子(beforeCreate,created,beforeMonted,mounted.beforUpdate,update,beforDestroy,destroyed) ...
vue学习记录：遇到过的问题记录
项目构建 vue-cli 安装中找不到vue命令这是在ubuntu系统中遇到的,全局安装后可以 npm install -g vue-cli Vue 组件间通信父子 props/event $pa ...
Vue学习笔记（4）（Vue-router）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vue-router 0. 认识路由什么是路由? 路由是一个网络工 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
从零开始的Vue学习
前言这个笔记参考了官方文档和多篇文章,虽然是自己一个字一个字手打的,但还是算是转载,并非原创.分享这个笔记的作用一是监督自己,二是希望帮助到和我一样在学习vue的小伙伴.同时,我自己照着教程写的 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
vue学习笔记（超详细）
文章目录一. Vue基础认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合 v-on v-for遍历数 ...
小汪的vue学习笔记
目录第一章 1.let和const 2.MVVM 3.生命周期 1.生命周期函数 4.插值操作 5.v-bind使用 6.v-for的使用 7.计算属性computed 1.简单使用 2.复杂操作 ...
vue学习之VueRouter 路由
文章目录 vue router 1.认识路由的概念 1.1.何为路由 1.2.后端路由阶段 1.3.前端路由阶段 1.4.前端渲染和后端渲染? 2.前端路由的规则 2.1.URL的hash 方式 2. ...

vue学习之，导航钩子

vue学习之，导航钩子相关推荐

最新文章

热门文章