Vue里面提供的三大类钩子及两种函数

时间:2023-01-04 17:02:21

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

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

总体来讲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()函数

某个路由的钩子函数

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

Vue里面提供的三大类钩子及两种函数
const router = new VueRouter({
routes: [
{
path: '/login',
component: Login,
beforeEnter: (to, from, next) => {
// ...
},
beforeLeave: (to, from, next) => {
// ...
}
}
]
})
Vue里面提供的三大类钩子及两种函数

路由组件的钩子

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

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

Vue里面提供的三大类钩子及两种函数
var routes = [
{
path:'/home',
component:home,
name:"home"
}
]
Vue里面提供的三大类钩子及两种函数

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

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

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

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

Vue里面提供的三大类钩子及两种函数
beforeRouteLeave(to, from, next) {
next()
},
beforeRouteEnter(to, from, next) {
next()
},
beforeRouteUpdate(to, from, next) {
next()
},
data:{},
method: {}
Vue里面提供的三大类钩子及两种函数

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

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

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

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

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

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

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

  4. vue在使用ajax获取数据时,两种方法(jquery和vue&lowbar;resource&rpar;

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

  5. SpringBoot java配置类&commat;Configuration 的两种写法

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

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

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

  7. C&num;字段中加入list&lt&semi;类字段&gt&semi; 的两种写法

    类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学习笔记&lpar;四)-- 为实体类定义别名两种方法(基于xml映射)

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

随机推荐

  1. Windows Azure IP地址详解

    Windows Azure上的IP地址有以下几种: 公网IP地址 VIP ILPIP Reserved IP 内网IP地址 DIP Static IP VIP是动态分配的公网IP,VIP可以被分配到云 ...

  2. JavaWeb学习笔记——JavaBean的保存范围和删除

  3. PHP面向对象(分页)

    <?php   class page   {      var $table;      var $pagesize;      var $totalsize;      var $totalp ...

  4. pstack使用和原理【转】

    转自:http://www.cnblogs.com/mumuxinfei/p/4366708.html 前言: 最近小组在组织<<深入剖析Nginx>>的读书会, 里面作者提到 ...

  5. linux学习历程

    1.linux初步介绍:2.linux的第一次接触:3.linux用户管理4.linux常用命令(3600+个).5.linux下所有者,所在组和其他组的介绍6.linux下文件和目录权限机制 lin ...

  6. PHP截取中文字符串方法总结

    <?php @header('Content-type: text/html; charset=UTF-8'); $arr = "sa撒的发dfa多少sfd看sdf得12上24飞452 ...

  7. python&amp&semi;django 实现页面中关联查询小功能(中级篇)

    目的 组合搜索实现如下图功能 知识点 1.使用自定义标签模板(templatetags) 实现 models.py 和 views.py和初级篇一样 重点如下:在app01目录下创建templatet ...

  8. Python importlib 动态加载模块

    # 创建一个 src 文件夹,里面有一个 commons.py 文件,内容如下 def add(): print("add ....") # 创建一个 app.py 文件,内容如下 ...

  9. python&&num;160&semi;标准类库-数据类型之集合-容器数据类型

    标准类库-数据类型之集合-容器数据类型   by:授客 QQ:1033553122 Counter对象 例子 >>> from collections import Counter ...

  10. Bate版本控制报告

    报告beta阶段2周中,项目的版本控制情况,不包括未在coding.net的部分. 包括不限于:check in (不是push)次数; 总词数为29次 check in log(时间.人员.mess ...