before vue路由钩子_vue组件级路由钩子函数介绍,及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。
有多种方式可以在路由导航发生时执行钩子:全局的、单个路由独享的、或者组件级的。
一、全局钩子
你可以使用 router.beforeEach 注册一个全局的 before 钩子:
const router = newVueRouter({ ... })
router.beforeEach((to,from, next) =>{//...
})
同样可以注册一个全局的 after钩子,不过它不像 before钩子那样,after钩子没有 next方法,不能改变导航
router.afterEach(route => { //...})
二、某个路由独享的钩子
你可以在路由配置上直接定义 beforeEnter 钩子:
const router = newVueRouter({
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。
study
work
hobby
测试数据:{{test}}
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()
}
}
四、路由钩子在实际开发中的应用场景
路由钩子在实际的开发过程中使用较少, 我在实际的项目中只在组件内使用过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()
}
before vue路由钩子_vue组件级路由钩子函数介绍,及实际应用相关推荐
- 全局路由守卫,独享路由守卫,组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
- vue组件级路由钩子函数介绍,及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 rout ...
- vue路由跳转子组件_vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)...
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
- Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载 目录 异步组件 异步组件介绍 异步组件声明 高级异步组件 路由懒加载 路由懒加载介绍 路由懒加载方法 把组件按组分块 异步组件 异步组件介绍 在开发大型 ...
- vue面向切面_vue:在路由跳转中使用拦截器
1:首先在路由对象中的某一个具体的路由对象加这样一个属性 meta: { requireAuth:true } 2:然后在main.js中添加这段代码 router.beforeEach((to, ...
- iis vue history 配置_Vue实战——vueRouter路由的添加与配置
接上文:vue实战--自定义基础路径,端口号,继续我们的实战项目讲解之旅.本文讲解vue核心插件--vue router. 在本项目中,使用了vue-cli3.10创建的,所以默认带了router,那 ...
- vue变量传值_vue组件与组件之间传值
目录 一.父组件向子组件传值 二.子组件向父组件传值 三.兄弟组件之间的传值 如上图所示,2是1的子组件,1是3的父组件,2和3是兄弟组件 一.父组件向子组件传值: html代码: <div i ...
- vue底部选择器_Vue组件-极简的地址选择器
一.前言 本文用Vue完成一个极简的地点选择器,我们接下来带大家实现这个.当然其中也有一些值得学习与注意的地方.话不多说,我们先上demo图.因为每个人的需要不一样,我这边就不在实现更多的功能,所以留 ...
- Vue学习第五天(路由相关)
Vue学习第五天(路由相关) 今天主要学习了vue中ref关键字和路由相关的知识点 对于ref,可以理解为引用,当我们在一个传统的html标签上使用这个标签以后 <login ref=" ...
最新文章
- Python任意网段Web端口信息探测工具
- 数学--数论--HDU 2582 F(N) 暴力打表找规律
- 58同城 php,58同城PHP面试试题
- js视频html代码,html+JS刷图实现视频效果(示例代码)
- php怎么调用dll例子,php调用dll的实例操作动画与代码分享_PHP教程
- 西威变频器 服务器显示,西威变频器故障查询及操作方法;
- web第二章 namp和massan扫描技术
- 信号灯绿波服务器,主干道绿波与红波控制策略
- 超级记忆/图像数字记忆 110位数字图像转换表 81-90
- P1801 黑匣子 题解
- 水晶报表加载本地图片 【BY阿泰】
- Android-资深架构师的成长之路(技术详细介绍),flutterui套件
- 零度之下代码输入不了_期末考试查分,基于青果高校教务系统的一个自动python脚本代码
- 中国绿色PPP项目行业现状及发展建议:投资规模不断扩大,需要改善存在的问题,进一步推动绿色PPP健康发展[图]
- golang学习之negroni/gizp源码分析
- DCloud之Android原生工程配置
- git 提交修改备注
- vue前端项目启动出错处理
- electron使用node-pty问题解决
- [Objective-C]第二天
热门文章
- dlib dll load failed 找不到指定的模块
- python内积 卷积
- ImportError: libcublas.so.9.0: cannot open shared object file: No such file or directory
- 75 Zabbix中文乱码问题
- windows操作系统的日志类型
- Java实现话术词槽匹配_桔子互动|百度UNIT操作详解(上篇)
- 1载波把32个信道按_「防疫」截至8月27日,单日确诊新增32例,张文宏带来1个坏消息...
- java获得一个空闲端口号_Python找出9个连续的空闲端口
- memory matlab,memory – 在MATLAB中处理大量结构
- 学习python装饰器_Python装饰器学习(九步入门)