博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【11】vue router 之导航钩子
阅读量:5875 次
发布时间:2019-06-19

本文共 956 字,大约阅读时间需要 3 分钟。

导航钩子

vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。http://www.jianshu.com/p/f375d84c1d4b

全局钩子
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {    // do something     next();});router.afterEach((to, from, next) => {    console.log(to.path);});

  

每个钩子方法接收三个参数:

to: Route : 即将要进入的目标 [路由对象]
from: Route : 当前导航正要离开的路由
next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next
方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from
路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

确保要调用 next方法,否则钩子就不会被 resolved。

组件内的钩子
let fromPath = '';export default{    beforeRouteEnter (to, from, next) {         // 在渲染该组件的对应路由被 confirm 前调用         // 不!能!获取组件实例 `this`         // 因为当钩子执行前,组件实例还没被创建         fromPath = from.path;         next();    },}

  

 

转载于:https://www.cnblogs.com/yeziTesting/p/7170802.html

你可能感兴趣的文章
拆解探索MagSafe电源接口结构和指示灯变颜色原理
查看>>
Android中EditText,Button等控件的设置
查看>>
lintcode:Remove Nth Node From End of Lis 删除链表中倒数第n个节点
查看>>
POJ 1915-Knight Moves (单向BFS && 双向BFS 比)
查看>>
java中在linux下利用jstack检测死锁
查看>>
linux编译安装LAMP
查看>>
php中的continue用法
查看>>
Android小游戏应用---撕破美女衣服游戏
查看>>
TextKit简单示例
查看>>
网格最短路径算法(Dijkstra & Fast Marching)(转)
查看>>
最短路径算法-Dijkstra算法的应用之单词转换(词梯问题)
查看>>
软链接和硬链接详解
查看>>
HTML5 video 视频标签 常用属性
查看>>
深入理解javascript对象系列第一篇——初识对象
查看>>
Ubuntu16.04下搭建Go语言环境
查看>>
eclipse调试(debug)的时候,出现Source not found,Edit Source Lookup Path,一闪而过
查看>>
Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放
查看>>
Kafka消息模拟器
查看>>
Linux常用基本命令(cat)
查看>>
Redis_master-slave模式
查看>>