vue组件级路由钩子函数介绍,及实际应用
正如其名,vue-router
提供的导航钩子主要用来拦截导航,让它完成跳转或取消。
有多种方式可以在路由导航发生时执行钩子:全局的、单个路由独享的、或者组件级的。
一、全局钩子
你可以使用 router.beforeEach
注册一个全局的 before
钩子:
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
同样可以注册一个全局的 after
钩子,不过它不像 before
钩子那样,after
钩子没有 next
方法,不能改变导航
router.afterEach(route => { // ...})
二、某个路由独享的钩子
你可以在路由配置上直接定义 beforeEnter
钩子:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些钩子与全局 before
钩子的方法参数是一样的
三、组件内的钩子
最后,你可以在路由组件内直接定义以下路由导航钩子:
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不能获取组件实例 `this`
// 因为当钩子执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
beforeRouteEnter
钩子 不能 访问 this
,因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。
不过,你可以通过传一个回调给 next
来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
你可以 在 beforeRouteLeave
中直接访问 this
。这个 leave
钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false)
来取消导航。
同时注意必须有这个next(),相当于一个按钮开启一样。
1、beforeRouteEnter(to,from,next)
beforeRouteEnter 函数内部 this 是undefined,这是因为在执行路由钩子函数beforRouteEnter时候,组件还没有被创建出来;先执行beforRouteEnter,再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象,如:next( (vm)=>{} ),参数vm就是组件的实例化对象。
2、beforeRouteUpdate(to,from,next)
About组件是有二级导航的,在切换二级导航的时候,对应的内容是在变化的;但是about组件是复用的,只会生成一次,切换二级导航的时,如何知道导航在更新呢?
一个组件有二级导航的时候,点击二级导航的时候导航路径更新了,会触发路由钩子函数beforeRouteUpdate。
3、beforeRouteLeave(to,from,next)
当在about切换到user时,about页面有些数据还没有加载完成,这时候我们不让它切换到user。
<template>
<div>
我是about
<hr>
<ul class="subnave f-cb">
<!-- a标签中href属性不需要写地址,页面编译完成后自动会在href中加入对应的路劲 -->
<router-link :to='{name:"About"}' exact tag="li">
<a>study</a>
</router-link>
<router-link :to='{name:"Work"}' tag="li">
<a>work</a>
</router-link>
<router-link :to='{name:"Hobby"}' tag="li">
<a>hobby</a>
</router-link>
</ul>
测试数据:{{test}}
<router-view></router-view>
</div>
</template> <script>
export default {
data(){
return {
test:'改变之前'
}
},
beforeCreate(){//组件生命周期函数
console.log('beforeCreate')
},
//当进入组件之前,执行 beforRouteEnter 路由钩子函数
beforeRouteEnter(to,from,next){
console.log('beforRouteEnter')
console.log(this) // 结果为undefined,因为在执行beforRouteEnter时候,组件还没有被创建出来;先执行beforRouteEnter,再执行beforeCreate
next((vm)=>{ //参数vm就是当前组件的实例。
vm.test = '我被改变了'
})
},
beforeRouteUpdate(to,from,next){
console.log('beforeRouteUpdate')
next()
},
beforeRouteLeave(to,from,next){//离开组件的时候触发
//什么都不写的时候,不会离开(走下一步)
next()
}
}
</script>
四、路由钩子在实际开发中的应用场景
路由钩子在实际的开发过程中使用较少, 我在实际的项目中只在组件内使用过beforeRouteLeave, 使用场景分别为一下三类情况:
1、清除当前组件中的定时器
当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:
beforeRouteLeave (to, from, next) {
window.clearInterval(this.timer) //清除定时器
next()
}
2、当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转
如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况. 应该阻止用户跳转
beforeRouteLeave (to, from, next) {
//判断是否弹出框的状态和保存信息与否
if (this.dialogVisibility === true) {
this.dialogVisibility = false //关闭弹出框
next(false) //回到当前页面, 阻止页面跳转
}else if(this.saveMessage === false) {
//弹出警告
next(false) //回到当前页面, 阻止页面跳转
}else {
next() //否则允许跳转
}
}
3、保存相关内容到Vuex中或Session中
当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中
beforeRouteLeave (to, from, next) {
localStorage.setItem(name, content); //保存到localStorage中
next()
}
vue组件级路由钩子函数介绍,及实际应用的更多相关文章
- vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- vue 组件中的钩子函数 不能直接写this
export default { data(){ return { num: 18 } }, beforeRouteEnter(to, from, next){ next(vm=>{ vm.nu ...
- VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数
一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...
- vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)
第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
- Vue源码后记-钩子函数
vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- Python面向对象中super用法与MRO机制
1. 引言 最近在研究django rest_framework的源码,老是遇到super,搞得一团蒙,多番查看各路大神博客,总算明白了一点,今天做一点总结. 2. 为什么要用super 1)让代码维 ...
- 不要62 hdu 2089 dfs记忆化搜索
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2089 题意: 给你两个数作为一个闭区间的端点,求出该区间中不包含数字4和62的数的个数 思路: 数位dp中 ...
- 【基础知识】Asp.Net基础三
服务器端控件一般用于访问量不高的网站,要做到物尽其用. 服务器端控件: FIleUpload控件:向服务器上传文件 if (this.FileUpload1.HasFile) { // Path.Ge ...
- ?P<username>\w+
- 01-学前入门.Net两种交换模式
C/S:客户机(Client)/服务器模式(Server)Winfrom应用程序 B/S:浏览器(Browser)/服务器模式(Server)Internet应用模式
- 希尔排序之C++实现(高级版)
希尔排序之C++实现(高级版) 一.源代码:ShellSortHigh.cpp /*希尔排序基本思想: 先取一个小于n的整数d1作为第一个增量,把文件的全部记录分组. 所有距离为d1的倍数的记录放在同 ...
- wpf企业应用之主从结构列表
主从结构在企业级应用中相当常见,这里结合我的例子谈一下wpf中主从结构列表展示的常用做法,具体效果见 wpf企业级开发中的几种常见业务场景. 首先,Model有两种,主表对应model(假设为mode ...
- UOJ 310 黎明前的巧克力(FWT)
[题目链接] http://uoj.ac/problem/310 [题目大意] 给出一个数集,A从中选择一些数,B从中选择一些数,不能同时不选 要求两者选择的数异或和为0,问方案数 [题解] 题目等价 ...
- hdu 4560 拆点最大流 ***
题意: 2013年一开始,一档音乐节目“我是歌手”就惊艳了大家一回.闲话少说,现在,你成为了这档节目的总导演,你的任务很简单,安排每一期节目的内容. 现 在有N个歌手,M种歌曲流派(Rock,Pop之 ...
- bzoj 2178
这题调精度真痛苦啊(向管理员要了数据才调出来). 用的是hwd在WC2015上讲的方法,考虑将原图分割,根据每个圆的左右边界和圆与圆交点的横坐标来分割,这样原图就被分成很多竖着的长条,并且每一条中间都 ...