详解vue-router 2.0 常用基础知识点之导航钩子


Posted in Javascript onMay 10, 2017

导航钩子

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

全局钩子

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

router.afterEach((to, from, next) => {
  console.log(to.path);
});

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

  1. to: Route : 即将要进入的目标 [路由对象]
  2. from: Route : 当前导航正要离开的路由
  3. next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next

方法的调用参数。

  1. next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。
  2. next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from
  3. 路由对应的地址。
  4. next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

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

组件内的钩子

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
Exjs 入门篇
Apr 07 Javascript
js Function类型
Dec 04 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
js中的 || 与 && 运算符详解
May 24 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
关于vue-router路径计算问题
May 10 #Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
Bootstrap table使用方法总结
May 10 #Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 #Javascript
vue-axios使用详解
May 10 #Javascript
You might like
php中substr()函数参数说明及用法实例
2014/11/15 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
一个网马的tips实现分析
2010/11/28 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python实现登陆文件验证方法
2018/10/06 Python
Python版名片管理系统
2018/11/30 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
品学兼优的大学生自我评价
2013/09/20 职场文书
办公室主任职责范文
2013/11/08 职场文书
党小组考察意见
2015/06/02 职场文书
李强优秀员工观后感
2015/06/16 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python