vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)
模式
vue-router中的模式选项主要在router实例化的时候进行定义的,如下
const router = new VueRouter({
mode: 'history', // 两种类型history 还有 hash
routes: routes // 可以缩写成routes
})
有两种模式可供选择,history 和 hash,大致对比一下,
模式 | 优点 | 缺点 |
---|---|---|
hash | 使用简单、无需后台支持 | 在url中以hash形式存在,不会传到后台 |
history | 地址明确,便于理解和后台处理 | 需要后台配合 |
hash模式对于后台来讲就是一个url,因为地址中的hash值是不会传到后台的,所以服务器端做一个根地址的映射就可以了。
history模式最终的路由都体现在url的pathname中,这部分是会传到服务器端的,因此需要服务端对每一个可能的path值都作相应的映射。或者采用模糊匹配的方式进行映射。
除此之外,history模式下,如果后端不是一对一的进行映射,而是模糊匹配的话,那么就要注意一下404的情况了。这个时候就需要在前端router中定义404页面了。
404路由的定义
由于router本身的匹配是从上到下的,如果在前面找到了匹配的路由,就跳转了。因此可以直接在最后添加404的路由,如下

let routerConfig = [{
path: '/pages',
component: App,
children: [{
path: 'demo/step1/list',
component: coupon,
name: 'coupon-list',
meta: {
title: '红包'
}
}]
}, {
path: '*',
component: NotFound,
name: 'notfound',
meta: {
title: '404-页面丢了'
}
}]

在前面匹配不到的时候,* 代表全部,就是都指向404页面
路由钩子
路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的,靠。。好拗口啊。
总体来讲vue里面提供了三大类钩子
1、全局钩子
2、某个路由独享的钩子
3、组件内钩子
全局钩子
顾名思义,全局钩子全局用,使用如下

const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: routerConfig
}) router.beforeEach((to, from, next) => {
document.title = to.meta.title || 'demo'
if (!to.query.url && from.query.url) {
to.query.url = from.query.url
}
next()
}) router.afterEach(route => { })

某个路由独享钩子
就像说的一样,给某个路由单独使用的,本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是,这里的一般定义在router当中,而不是在组件内。如下

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

组件内钩子
首先看一下官方定义:
你可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
路由组件!路由组件!路由组件!重要的事情说三遍,大家一定要注意这里说的是“路由组件”,而路由组件!== 组件,路由组件!== 组件,路由组件!== 组件!之前一直没注意这点,然后在子组件里面傻乎乎的调钩子函数发现一直没用。。。
我们先来看一下什么是路由组件?
路由组件:直接定义在router中component处的组件
也就是说router中定义的入口vue文件之外的组件,是没有钩子函数的,也就不用说使用了。但是如果你使用了并不会报错,只是没反应。(本想画个图的,太懒了。。。自己理解理解吧,很好理解的)
这里再回头看下这个路由内钩子是怎么用的,很简单和data、method平级的方法

beforeRouteLeave(to, from, next) {
// ....
next()
},
beforeRouteEnter(to, from, next) {
// ....
next()
},
beforeRouteUpdate(to, from, next) {
// ....
next()
},
computed: {},
method: {}

三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
tips:
beforeRouteEnter是新进入的一个路由,比如进入/login登录界面,会触发beforeRouteEnter这个钩子;
而beforeRouteUpdate是路由更新时触发,从主页进入登录界面不会触发这个钩子函数,一个父路由下的子路由跳转会触发这个钩子函数。
vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)的更多相关文章
- Angular 4 父组件调用子组件中的方法
1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html(第三行是模板中调用子组件的方法) ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- vue中父组件调用子组件的方法
原文地址 文章目录 什么是组件? 使用组件 组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自 ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- Vue 父组件调用子组件函数的方法
parent.vue(父组件的内容): <template> <div @click="divClick"> <info-wnd ref=" ...
- vue父组件调用子组件资源
通过上篇博文提到的方法我们可以触发子组件的某个事件来实现调用子组件的某些资源(例如数据和方法),但是更多的情况下我们会想不通过触发子组件的事件,而直接调用子组件的资源 这个时候我们就需要用到ref了, ...
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
随机推荐
- springboot的起步依赖
加载自动配置的方式2: springboot读取配置文件的方式: 1.读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或applicatio ...
- 解决QtCreator中文乱码
在QT的菜单栏”Tools“ -> "Options" -> "Behavior" -> "File Encoding" ...
- operator new,new operator,placement new的区别
原文地址:http://www.cnblogs.com/jamesmile/archive/2010/04/17/1714311.html,在此感谢 C++中的operator new与new ope ...
- elasticsearch 动态模板设置
自定义动态映射 如果你想在运行时增加新的字段,你可能会启用动态映射.然而,有时候,动态映射 规则 可能不太智能.幸运的是,我们可以通过设置去自定义这些规则,以便更好的适用于你的数据. 日期检测 当 E ...
- 面向对象【day08】:反射(五)
本节内容 概述 反射函数 综合使用 一.概述 反射我们以后会经常用到,这个东西实现了动态的装配,通过字符串来反射类中的属性和方法 二.反射函数 2.1 hasarttr(obj,name_str) 作 ...
- Java 编程下使用 Class.forName() 加载类【转】
在一些应用中,无法事先知道使用者将加载什么类,而必须让使用者指定类名称以加载类,可以使用 Class 的静态 forName() 方法实现动态加载类.下面的范例让你可以指定类名称来获得类的相关信息. ...
- UESTC - 1172 三句话题意
题目链接 记一个集合的gcd为该集合内所有数的最大公约数, 求一个给定集合的非空子集的gcd的k次方的期望~ Input 第一行有一个数t,表示数据组数 接下去每组数据两行,第一行两个数n,k(0 & ...
- 【★★★★★】提高PHP代码质量的36个技巧
http://www.cnblogs.com/52php/p/5658031.html 不要直接使用 $_SESSION 变量 某些简单例子: $_SESSION['username'] = $use ...
- mipsel汇编指令学习
MIPS汇编语言基础 MIPS的系统结构及设计理念比较先进,其指令系统经过通用处理器指令体系MIPS I.MIPS II.MIPS III.MIPS IV.MIPS V,以及嵌入式指令体系MIPS16 ...
- Java——集合
Java的集合类是一种非常有用的工具类,用于存储多个对象.它是一个容器,可以把多个对象放到里面. Java集合分三种情况: Set:无序.不可重复 List:有序.可重复 Map:具有映射关系 Col ...