详解vue-router 2.0 常用基础知识点之导航钩子
更新时间：2017年05月10日 11:29:11 作者：NowTheFuture
本篇文章主要介绍了vue-router 2.0 常用基础知识点之导航钩子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
导航钩子
vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。
全局钩子
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();
},
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue-router配合ElementUI实现导航的实例
- VueRouter导航守卫用法详解
- vue实现nav导航栏的方法
- vue实现导航栏效果(选中状态刷新不消失)
- vue 挂载路由到头部导航的方法
- vue2导航根据路由传值,而改变导航内容的实例
- vue-router路由与页面间导航实例解析
- vue router仿天猫底部导航栏功能
- 详解VueRouter进阶之导航钩子和路由元信息
- 详解使用Vue Router导航钩子与Vuex来实现后退状态保存
- vue-router 导航钩子的具体使用方法
- 详解vue.js移动端导航navigationbar的封装
- vue2.0实现导航菜单切换效果
- vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）
- 非常实用的vue导航钩子
- vue2.0 elementUI制作面包屑导航栏
相关文章
这篇文章主要介绍了vue-cli3全面配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
vue里提供了keep-alive组件用来缓存状态,这篇文章主要给大家介绍了关于vue中keepAlive组件的作用和使用方法的相关资料,需要的朋友可以参考下2021-07-07
详解vuex中action何时完成以及如何正确调用dispatch的思考
这篇文章主要介绍了详解vuex中action何时完成以及如何正确调用dispatch的思考，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
vue3(optionApi)使用Element Plus库没有效果的解决方式
这篇文章主要介绍了vue3(optionApi)使用Element Plus库没有效果的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了vue ElementUI实现异步加载树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家详细介绍了Vue.js下拉菜单组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要为大家介绍了vue3 pinia踩坑及解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了vue使用swiper插件实现轮播图的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-05-05
最近在做一个vue的项目,碰到一点关于Map键值对传参的问题,下面这篇文章主要给大家介绍了关于Vue中如何使用Map键值对传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
VUE跨域问题Access to XMLHttpRequest at
今天发现一个错误，VUE发送请求的时候不能请求到正确数据，VUE跨域问题Access to XMLHttpRequest at，本文就详细的来介绍一下解决方法，感兴趣的可以了解一下2022-05-05
最新评论