文档章节

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

铸剑为犁413
 铸剑为犁413
发布于 05/12 20:44
字数 586
阅读 14
收藏 3
点赞 0
评论 0

上一篇: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
博文 20
码字总数 15349
作品 0
成都
前端工程师
Vue入坑——vue-cli(脚手架)代码详解

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

铸剑为犁413
05/09
0
0
Vue2.0之vue-router

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

浪里行舟
05/21
0
0
关于vue-router那些事

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

howgod
05/21
0
0
解密vue-router: 从源码开始

前几天笔者看到一个问题:你真的了解vue-router的吗?你知道vue-router的运行原理吗?抱着这样的问题,笔者开始了vue-router的源码探索之旅。本文并没有逐行去深究源码,而是跟着笔者画的流程...

玩弄心里的鬼
05/08
0
0
2018 我所了解的 Vue 知识大全

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

cacao111
07/11
0
0
理解vue实例的生命周期和钩子函数

虽然经常使用mounted、created等几个钩子函数,但是并没有很系统的将它和生命周期关联一起去理解,这导致我在最近项目里踩了坑。所以现在花点时间,整理一下这方面的知识。 我的其他文章,也...

四小七
06/21
0
0
Vue2.0笔记——Vue实例

Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 当创建一个 Vue 实例时,你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等。 一个 Vu...

逝岁月
04/18
0
0
keep-alive:组件级缓存

title: keep-alive组件 date: 2018-06-11 09:13:26 tags: keep-alive Vue vue-router 页面缓存 在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router。vue-router不保存被切换组件的...

大肥凯
07/09
0
0
说说我眼中的Vue和React

前序 我最早接触的是reactjs,时间是在2016年,当时主要从官网学习,并且写了一些笔记。坦白讲,当时学习了一段时间,只是对里面的概念有点印象而已。也搞不懂怎么去具体的使用在项目里面,里...

a独家记忆
07/10
0
0
Vue学习笔记之vue-cli项目搭建及解析

(一)安装node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。 只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csd...

逆袭的小菜鸟
2017/12/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部