在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

总体来讲vue里面提供了三大类钩子,两种函数
1、全局钩子
2、某个路由的钩子
3、组件内钩子

两种函数:

1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/

2.Vue.afterEach(function(to,form))/*在跳转之后判断*/

全局钩子函数

顾名思义,它是对全局有效的一个函数

1
2
3
4
5
6
router.beforeEach((to, from, next) => {
    let token = router.app.$storage.fetch("token");
    let needAuth = to.matched.some(item => item.meta.login);
    if(!token && needAuth) return next({path: "/login"});
    next();
});

beforeEach函数有三个参数:

  • to:router即将进入的路由对象
  • from:当前导航即将离开的路由
  • next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。

afterEach函数不用传next()函数

某个路由的钩子函数

顾名思义,它是写在某个路由里头的函数,本质上跟组件内函数没有区别。

const router = new VueRouter({
routes: [
{
path: '/login',
component: Login,
beforeEnter: (to, from, next) => {
// ...
},
beforeLeave: (to, from, next) => {
// ...
}
}
]
})

路由组件的钩子

注意:这里说的是路由组件!

路由组件 属于 组件,但组件 不等同于 路由组件!所谓的路由组件:直接定义在router中component处的组件。如:

var routes = [
{
path:'/home',
component:home,
name:"home"
}
]

在子组件中调用路由的钩子函数时无效的。

在官方文档上是这样定义的:

可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

这里简单说下钩子函数的用法:它是和data,methods平级的。

beforeRouteLeave(to, from, next) {
next()
},
beforeRouteEnter(to, from, next) {
next()
},
beforeRouteUpdate(to, from, next) {
next()
},
data:{},
method: {}

Vue里面提供的三大类钩子及两种函数的更多相关文章

  1. c++ 类的默认八种函数

    c++ 类的默认八种函数 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #incl ...

  2. 类与类之间的两种关系------新标准c++程序设计

    在c++中,类和类之间有两种基本关系:复合关系和继承关系. 复合关系也称为“has a”关系或“有”的关系,表现为封闭类,即一个类以另一个类的对象作为成员变量. 继承关系也称为“is a”关系或“是” ...

  3. thinkphp的钩子的两种配置和两种调用方法

    thinkphp的钩子行为类是一个比较难以理解的问题,网上有很多写thinkphp钩子类的文章,我也是根据网上的文章来设置thinkphp的钩子行为的,但根据这些网上的文章,我在设置的过程中,尝试了十 ...

  4. vue在使用ajax获取数据时,两种方法(jquery和vue_resource)

    @{    Layout = null;} <!DOCTYPE html> <html><head>    <meta name="viewport ...

  5. SpringBoot java配置类@Configuration 的两种写法

    首先在Springboot项目中,件一个java类,使用注解@Configuration  ,则这个类是SpringBoot bean的创建的配置文件类,,这种配置文件类有两种写法 1.使用包扫描 , ...

  6. 在vue中获取不到canvas对象? 两种解决办法。

    1. mounted 钩子函数 初次肯定获取到id 2. 如果canvas父级用到了v-if 请改成v-show ,vue Dom节点 重新渲染导致methods 方法获取不到对象.

  7. C#字段中加入list<类字段> 的两种写法

    类1 public class NumCon { public string zsNum { get; set; } } 类2 public class RepeatMess //重复数据响应 { p ...

  8. Functions类,一个Javascript的函数加法类,将两个函数加起来,顺序执行

    以下是类的代码: var Functions = { oFunctions: null, add: function (oFunc, oNewFunc) { var oNew = function ( ...

  9. mybatis学习笔记(四)-- 为实体类定义别名两种方法(基于xml映射)

    下面示例在mybatis学习笔记(二)-- 使用mybatisUtil工具类体验基于xml和注解实现 Demo的基础上进行优化 以新增一个用户为例子,原UserMapper.xml配置如下: < ...

随机推荐

  1. mui中如何使用tab来切换子页面 mui-bar, mui-bar-tab

    mui是前端框架但是很多人用它写移动端 那么mui底部切换是怎么做到的呢? 如何点击某个tab来切换不同的页面? 解答: 1首先我们需要引入mui框架的底部tab元素 代码如下 <!--tabl ...

  2. 置顶,博客中所有源码 github

    所有项目源代码,开源地址. 作者 github 主页 https://github.com/nejidev 目前开源项目有: 1, linux tea5767 at24c08 mmap 实现fm 收音 ...

  3. C++ STL迭代器原理和简单实现

    1. 迭代器简介 为了提高C++编程的效率,STL(Standard Template Library)中提供了许多容器,包括vector.list.map.set等.然而有些容器(vector)可以 ...

  4. python爬虫的数据库连接问题

    1.需要导的包 import pymysql 2.# mysql连接信息(字典形式) db_config ={ 'host': '127.0.0.1',#连接的主机id(107.0.0.1是本机id) ...

  5. adb模拟按键与输入

    在 adb shell 里有个很实用的命令叫 input,通过它可以做一些有趣的事情. input 命令的完整 help 信息如下: Usage: input [<source>] < ...

  6. numpy——>数组拼接np.concatenate

    语法:np.concatenate((a1, a2, ...), axis=0) 1.默认是 axis = 0,也就是说对0轴(行方向)的数组对象,进行其垂直方向(axis=1)的拼接(即数据整行整行 ...

  7. guava限流器RateLimiter原理及源码分析

    前言 RateLimiter是基于令牌桶算法实现的一个多线程限流器,它可以将请求均匀的进行处理,当然他并不是一个分布式限流器,只是对单机进行限流.它可以应用在定时拉取接口数据, 预防单机过大流量使用. ...

  8. .NET 开发工具盘点和现状

    在这里我盘点一下.NET的开发工具:Visual Studio.Jetbrains Rider.Mono Develop.SharpDevelop.QuickSharp.Visual Studio C ...

  9. iview mock main.js

    main.js // 实际打包时应该不引入mock /* eslint-disable */ // if (process.env.NODE_ENV !== 'production') require ...

  10. VS2019 C++动态链接库的创建使用(2) - 客户调用接口

    因为动态链接库里的内容是自己定义的,所以在外部程序调用时我们自己知道库里包含哪些变量和函数,如果我们提供库给其他人使用,则最好增加一个头文件,告知库里包含的函数: ①将动态链接库源文件内容增加红色框内 ...