文档章节

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

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

上一篇: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
博文 19
码字总数 15181
作品 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
2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈! Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很...

cacao111
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Flask 开发填坑

插件的选择: flask-security 真的是个鸡肋啊。自带的页面,好丑。还不如用flask-login来做呢。

pearma
15分钟前
0
0
讲述下 :LVM逻辑卷管理遇到的问题

LVM学习逻辑卷管理创建逻辑卷遇到的问题 1 实验环境 系统 内核 发行版本 CentOS 2.6.32-754.2.1.el6.x86_64 CentOS release 6.10 (Final) 由于是最小化安装没有xfs命令,yum安装如下包支持此...

linuxprobe16
50分钟前
0
0
day95-20180922-英语流利阅读-待学习

Hey Jude 半个世纪传唱不衰的背后故事 毛西 2018-09-22 1.今日导读 2004 年,The Beatles 被《滚石》杂志选为“历史上最伟大的 50 位流行音乐家的第一位”。这四名来自英国利物浦的男孩不仅对...

飞鱼说编程
57分钟前
1
0
OSChina 周六乱弹 —— 放假前期焦虑症晚期

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享Matteo的单曲《Panama》: 《Panama》- Matteo 手机党少年们想听歌,请使劲儿戳(这里) @新垣吉衣OSC :我发现只要去有小朋友...

小小编辑
今天
193
10
wait()被notify()后,接着执行wait()后面的语句

wait()被notify()后,接着执行wait()后面的语句

noteman
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部