“约见”面试官系列之常见面试题之第七十六篇之vue-router中的路由钩子函数基本用法 （建议收藏）
vue-router中的路由钩子函数基本用法
路由钩子函数分为三种类型如下：
第一种：全局钩子函数。
router.beforeEach((to, from, next) => {
console.log('beforeEach')
//next() //如果要跳转的话，一定要写上next()
//next(false) //取消了导航
next() //正常跳转，不写的话，不会跳转
})
router.afterEach((to, from) => { // 举例: 通过跳转后改变document.title
if( to.meta.title ){
window.document.title = to.meta.title //每个路由下title
}else{
window.document.title = '默认的title'
}
})
第二种：针对单个路由钩子函数
beforeEnter(to, from, next){
console.log('beforeEnter')
next() //正常跳转，不写的话，不会跳转
}
第三种：组件级钩子函数
beforeRouteEnter(to, from, next){ // 这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有创建出来
console.log("beforeRouteEnter")
console.log(this) //这时this还是undefinde，因为这个时候this实例还没有创建出来
next((vm) => { //vm,可以这个vm这个参数来获取this实例,接着就可以做修改了
vm.text = '改变了'
})
},
beforeRouteUpdate(to, from, next){//可以解决二级导航时，页面只渲染一次的问题，也就是导航是否更新了，是否需要更新
console.log('beforeRouteUpdate')
next();
},
beforeRouteLeave(to, from, next){// 当离开组件时，是否允许离开
next()
}
本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。
欢迎一起私信交流。
“睡服“面试官系列之各系列目录汇总（建议学习收藏）
“约见”面试官系列之常见面试题之第七十六篇之vue-router中的路由钩子函数基本用法 （建议收藏）相关推荐
- “约见”面试官系列之常见面试题之第七十五篇之vue中如何使当前css起作用（建议收藏）
方法很简单,在组件中的style前面加上scoped就可以了,示例: 本面试题为前端常考面试题,后续有机会继续完善.我是歌谣,一个沉迷于故事的讲述者. 欢迎一起私信交流. "睡服" ...
- “约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用（建议收藏）
那么vue 生命周期有哪些阶段呢 一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...
- “约见”面试官系列之常见面试题之第八十六篇之nexttick（建议收藏）
一.用途 应用场景:需要在视图更新之后,基于新的视图进行操作. this.$nextTick()方法主要是用在数据改变,dom改变应用场景中.vue中数据和dom渲染由于是异步的,所以,要让dom结构 ...
- “约见”面试官系列之常见面试题之第七十九篇之ES5和ES6（建议收藏）
什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...
- “约见”面试官系列之常见面试题之第七十八篇之fetch（建议收藏）
etch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案.fetch不是ajax的进一步封装,而是原生js.Fetch函数就是原生js,没有使用XMLHttpRequest对 ...
- “约见”面试官系列之常见面试题之第七十四篇之v-if和v-for优先级（建议收藏）
永远不要把 v-if 和 v-for 同时用在同一个元素上. 一般我们在两种常见的情况下会倾向于这样做: 为了过滤一个列表中的项目 (比如 v-for="user in users" ...
- “约见”面试官系列之常见面试题之第七十二篇之arrayList（建议收藏）
简介 ArrayList 是 java 集合框架中比较常用的数据结构了.继承自 AbstractList,实现了 List 接口.底层基于数组实现容量大小动态变化.允许 null 的存在.同时还实现了 ...
- “约见”面试官系列之常见面试题之第五十六篇之typeof返回的数据类型（建议收藏）
typeof 共返回6种数据格式: 1.object 2.undefined 3.string 4.number 5.boolean 6.function 特别注意Array和null返回的都是obj ...
- “约见”面试官系列之常见面试题之第四十六篇web标准理解和认识（建议收藏）
web标准简单来说可以分为结构.表现和行为.其中结构主要是有HTML标签组成.或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构.表现即指css样式表,通过css可以是页面的结构标签更具 ...
最新文章
- Magento获取指定分类下的所有子分类信息
- Winform中封装DevExpress的MarqueeProgressBarComtrol实现弹窗式进度条效果
- Tensorflow Lite人体姿势跟踪功能上线：基于PosNet的实时人体姿态估计
- React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四
- jquery怎么创建一个img标签
- ArrayList实现原理及源码分析之JDK8
- SQL 数据对比（case when in）
- python脚本模拟浏览器实现学习通自动刷网课
- 遗传算法（2）：对适应度函数的改进
- NCBI数据库以及常用编号
- 四旋翼无人机学习第5节--STM32最小系统外围电路分析
- 搞定 office 2007 错误 1706
- Windows画图使用总结
- 数字水印(DWT算法Python实现)
- 前端工程师到底有哪些晋升和发展方向选择？
- 设置Hbuildx实现编译less的快捷键
- maven编译报错Blocked mirror for repositories解决
- LInux Bridge（FDB表）
- vue项目图片插入不清晰，原因分析及解决办法
- HX=JE,HX-JE芯片无感升压ic