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

接收三个参数:

  • 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. LinuxDHCP配置

    目录 一.DHCP服务 1.1.了解DHCP服务 1.2.使用DHCP的好处 1.3.DHCP的分配方式 1.4.DHCP的租约过程 客户机请求IP地址 重新登录 更新租约 1.5.使用DHCP动态配 ...

  2. 【笔记】scikit-learn中的PCA(真实数据集)

    sklearn中的PCA(真实的数据集) (在notebook中) 加载好需要的内容,手写数字数据集 import numpy as np import matplotlib.pyplot as pl ...

  3. SpringBoot开发二

    需求介绍-Spring入门 主要是理解IOC,理解容器和Bean 代码 在Test里面利用getBean方法帮助我们看一下容器的创建: 那我首先要写一个Bean对象,假设是写一个访问数据库类. Alp ...

  4. [08 Go语言基础-for循环]

    [08 Go语言基础-for循环] 循环 循环语句是用来重复执行某一段代码. for 是 Go 语言唯一的循环语句.Go 语言中并没有其他语言比如 C 语言中的 while 和 do while 循环 ...

  5. Android手机QQ的UI自动化实践

    本文首发于果的博客园,原文链接:https://www.cnblogs.com/yuxiuyan/p/14992682.html, 转载请注明出处. UI自动化 我们为什么要搞UI自动化 可能很多同学 ...

  6. redis数据同步之redis-shake

    redis-shake简介 redis-shake是阿里开源的用于redis数据同步的工具,基本功能有: 恢复restore:将RDB文件恢复到目的redis数据库. 备份dump:将源redis的全 ...

  7. 菜鸟的springboot常用注解总结

    菜鸟的springboot常用注解总结 0.前言 可以毫不夸张地说,这篇文章介绍的 Spring/SpringBoot 常用注解基本已经涵盖你工作中遇到的大部分常用的场景.对于每一个注解我都说了具体用 ...

  8. COM笔记-Widows 注册表

    Widows 注册表 HKEY_CLASSES_ROOT在此关键字之下,可以看到有一个CLSID关键字.在CLSID关键字之下列有系统中安装的所有组件的CLSID.注册表CLSID是一个具有如下格式的 ...

  9. qt 中回调函数的实现

    在QT中回调函数主要可以实现多态性,通过回调函数可以动态处理一些操作.在多线程中,当同时需要处理多个事务的时候,显然你会去创建多个线程类然后实例化,这显然会增加开发工作,当我们在线程类中加入一个回调函 ...

  10. jsoup的Node类

    一.简介 Node类直接继承Object,实现了Cloneable接口,它是一个抽象类,类声明:public abstract class Node extends Object implements ...