路由跳转前后,需要做某些操作,这时就可以使用路由钩子来监听路由的变化。

接收三个参数:

  • to: Route: 即将要进入的目标路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

全局路由钩子:(router/index.js 或 main.js)

router.beforeEach((to, from, next) => {
//会在任意路由跳转前执行,next一定要执行,否则路由不能跳转
console.log(to,from);
//
next();
});
//
router.afterEach((to, from) => {
//会在任意路由跳转后执行
console.log('afterEach');
});


单个路由钩子:(router/index.js)
只有beforeEnter,在进入前执行,to参数就是当前路由

routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
//
会在当前路由跳转前执行,next一定要执行,否则路由不能跳转
    
next();
  } } ]


vue-router路由钩子的更多相关文章

  1. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  2. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  3. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  4. 必备技能五、router路由钩子

    在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...

  5. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  6. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  7. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  8. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

  9. Vue - Router 路由

    路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  10. vue router路由(三)

    当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...

随机推荐

  1. C++小知识——显示VS大括号/花括号折叠按钮

    这个功能默认是关闭的,打开路径如下: 将大纲语句块改为"True" 这个功能其实很有必要真不知道为啥默认要关闭这个功能. 站在巨人的肩膀上的思想,其实已经在互联网程序员之间深入人心 ...

  2. JStorm:概念与编程模型

    1.集群架构 JStorm从设计的角度,就是一个典型的调度系统,简单集群的架构如下图所示,其中Nimbus可增加一个备节点,多个Supervisor节点组成任务执行集群. 1.1.Nimbus Nim ...

  3. Servlet基本知识

    Servlet基本知识 1.IDEA创建第一个Servlet程序xing 这里说明如何使用 IDEA Ultimate 2020.1.3版本来新建第一个web程序.参考 MoonChasing 1.1 ...

  4. MySQL-12-innodb引擎补充

    innodb引擎保证事务的ACID 概念 redo log ---> 重做日志 ib_logfile0~1 50M 轮询使用 redo log buffer ---> redo内存区域 i ...

  5. 安鸾CTF Writeup SSRF02

    SSRF02 题目链接:http://www.whalwl.host:8090/ 看到题目,以为是SSRF 获取内网信息, SFTP FTP Dict gopher TFTP file ldap 协议 ...

  6. Dll文件的创建与测试C#

    创建Dll文件 首先使用VS 2019创建Dll项目,创建项目时选择"类库",如下图 在项目中创建类文件,添加测试代码: namespace PlantSim_C_Interfac ...

  7. S3C2440—7.存储控制器访问外设

    文章目录 一.内存接口的概念 二.存储控制器(内存控制器) 2.1 什么是存储控制器? 2.2 S3C2440存储控制器介绍 2.3 存储控制器如何处理不同位宽的外设 2.4 怎么确定芯片的访问地址? ...

  8. MATLAB—信号与系统中的应用

    文章目录 一. 理论知识 1.线性系统的响应 2.微分方程的解 Ⅰ.经典解 Ⅱ.完全响应 3.零输入响应 4.零状态响应 5.冲激响应 6.阶跃响应 7.卷积求零状态响应 二.连续信号的MATLAB描 ...

  9. HTML5内嵌文本编辑器

    1.这个编辑器用的是KindEditor 先看下效果: 2.准备: a):从官网下载KindEditor--->http://kindeditor.net/down.php b):解压到桌面测试 ...

  10. prism 的学习网站

    C#的学习网址: https://www.cnblogs.com/zh7791