文档章节

Vue入坑——vue-router钩子函数

铸剑为犁413
 铸剑为犁413
发布于 05/12 20:44
字数 586
阅读 32
收藏 2

上一篇:vue-router别名alias

一起学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

前言

开始学钩子函数之前,我有点不能理解这啥意思,后来我看了别人的小demo之后,有了一个初步理解,我觉得应该可以举个例子,就好像我们从接口拿数据分为几个阶段:发送请求、接收响应、处理数据...

钩子函数的话,就应该是执行路由之前,执行路由时,路由执行完了...这样好理解多了吧。

两种创建钩子的方法

(1)、路由配置文件中的钩子函数

a、在index.js里面写一个

这里我们给hellovue组件写一个

b、用了一个es6的箭头函数,里面的参数分别是:

to:路由将要跳转的路径信息

from:路由跳转之前的路径信息

next:路由的控制,他的参数通常是false和true

c、点击一下这个跳转链接,看他给我们打印什么出来

d、那个next()干什么用的?

我来改改他的参数

看看页面有啥变化

下面的数据都不显示了?

看看打印

emmmm,打印正常。

哎,我发现点击了其他路由之后,再点击我们设置了的这个路由,跳转不过来了。

我知道了,那个next(false);会阻断路由的跳转。

这种写钩子函数的方式get到了,但是注意,他只能写一种,就是beforeEnter

(2)、组件中的钩子函数

第一种写钩子函数的方式,只能写beforeEnter,下面这种呢就可以写两种啦,不过写法有些不同。

(1)、beforeRouteEnter

他叫作路由进入前的钩子函数,我们来看看怎么写

a、在right.vue里写

    beforeRouteEnter:(to,from,next)=>{
      console.log("准备进入路由组件");
      console.log(to);
      console.log(from);
      next();
    }

整体:

b、运行看打印效果:

好啦,依葫芦画瓢,把beforeRouteLeave写了

 

好啦,钩子函数的写法我们就知道啦,为以后实战打好基础!

——————————^~^我是萌萌哒分割线^~^————————————————

下一篇:

© 著作权归作者所有

共有 人打赏支持
铸剑为犁413
粉丝 5
博文 21
码字总数 16551
作品 0
成都
前端工程师
私信 提问
Vue-Router源码分析之index.js

前言 上一篇我们聊了:Vue-Router源码学习之install方法 虽然最近需求着实不少,但是感觉自己学习劲头还是蛮足的,并没有被需求压垮。今天,带来Vue-Router源码解析系列的第二篇文章:index...

酸楚与甘甜
09/10
0
0
vue2.x入坑总结—回顾对比angularJS/React

从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑。vue/anguarJS/React,三者对关系现在就是: https://www.zhoulujun.cn/upl...

zhoulujun
08/03
0
0
Vue-Router源码学习之install方法

Vue是怎么注册插件的呢? 使用过Vue的coder都知道,如果想注册一个vue的插件,在vue对象上能够使用的话(并不是绑在Vue.prototype上的那种暴力方式),必须使用Vue.use(你的插件)的方式来注册...

酸楚与甘甜
09/07
0
0
【Vue笔记】-- 详解vue生命周期

引言:   前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的理解。 正文: 首先上初始化代码(代码不完整,完整代码在下...

热爱前端的17号诶
07/19
0
0
Vue入坑——vue-cli(脚手架)代码详解

上一篇:vue-cli目录结构认识 一起学vue——vue学习总路线 ——————————^~^我是萌萌哒分割线^~^———————————————— 前言 上一篇简单认识了脚手架的目录结构,这篇我们...

铸剑为犁413
05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
17分钟前
1
0
RxJava threading

因为Rx针对异步系统设计,并且Rx也自然支持多线程,所以新的Rx开发人员有时会假设Rx默认是多线程的。在其他任何事情之前,重要的是澄清Rx默认是单线程的。 除非另有说明,否则每次调用onNex...

woshixin
17分钟前
0
0
Python的安装及文件类型、变量

一、为什么学习python 服务于大数据、人工智能、自动化运维。 简单易学 代码简洁 薪资高 近几年越来越火 二、Python的安装 linux 系统默认安装, CentOS7 默认安装了python2.7 安装ipython y...

枫叶云
25分钟前
0
0
JeeSite 4.x 树形结构的表设计和用法

有些同仁对于 JeeSite 4 中的树表设计不太了解,本应简单的方法就可实现,却写了很多复杂的语句和代码,所以有了这篇文章。 在 JeeSite 4 中的树表设计我还是相对满意的,这种设计比较容易理...

ThinkGem
31分钟前
19
0
0022-如何永久删除Kafka的Topic

1.问题描述 使用kafka-topics --delete命令删除topic时并没有真正的删除,而是把topic标记为:“marked for deletion”,导致重新创建相同名称的Topic时报错“already exists”。 2.问题复现...

Hadoop实操
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部