vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
导航守卫
一、全局导航守卫
1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数
2. 每个路由 都有一个 meta
3. 全局导航守卫分两种:
1. 全局前置导航守卫:路由还没有跳转之前
2. 全局后置导航守卫:路由跳转之后
3. to 和 from 都是 router
3.1 to 即将跳转的路由
3.2 from 跳转之后的路由
4. next 函数 必须调用,不写所有的 路由 就没法跳转
4. 全局前置导航守卫:路由跳转前 执行这个方法
router.beforeEach ((to, from, next)=> {
next()
})
5. 全局后置导航守卫:路由跳转后会执行这个方法,它没有 next函数。路由跳转之后会执行这个方法
router.afterEach ((to, from) => {
console.log("路由跳转后")
})
二、路由独享守卫
1. 某个路由独有的 其它路由没有,只有进入某个路由,才会触发这个路由方法
三、组件类的守卫
一、 beforeRouteEnter
2. 当该组件对应的 路由被渲染时 会执行这个函数
注意:这个函数不能使用this关键字,因为组件化还没有实例
二、beforeRouteUpdate
1. 在当前路由发生改变且该组件被复用的时候
2. 这种现象只能发生在路由传参上,只有路由传参才会出现路由不同,组件被复用
三、beforeRouteLeave
导航离开该组件对应的路由 会执行这个函数
作者:晋飞翔
手机号(微信同步):17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!!!
vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )的更多相关文章
- vue学习指南:第十五篇(详细) - Vuex
Vuex 一.基础 1. Vuex 相当于 vue的数据仓库 2. Vuex 是 vue 的状态管理工具 3. Vuex中的 state 只能通过mutations 改变 4. Vuex很适合做购物车 ...
- vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )
一.路由的配置 路由 vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue学习(二) :第一个Vue项目
OS: Windows 10 Home 64bit Chocolatey version: 0.10.13 npm version: 6.4.1 yarn version: 1.16.0 git ve ...
- vue学习指南:第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...
- vue学习指南:第四篇(详细) - vue的 :class 和 :style
1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...
- vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))
各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...
- vue学习指南:第三篇(详细) - vue的生命周期
今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...
- vue学习指南:第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
随机推荐
- 给test函数加个装饰器!
import timedef timer(func): def deco(*args,**kwargs): start_time=time.time() func(*args,**kwargs) st ...
- ts中基本数据类型(上)
/* 定义数组*/ var arr: number[] = [1, 2, 3]; var arr1: Array<number> = [1, 2, 3]; var arr2: [str ...
- MySql学习-3.命令脚本
一.数据库操作: 1. 登录数据库:mysql -uroot -p (这个password是自己设定的,我这里的没密码) 注意:(数据路径是:D:\MySql\install1\data 操作路径:D ...
- SQLserver 行变列。
首先看看效果是不是想要的 变成 ok,我的效果达到了.那就记录下代码吧. create table temp1(count_ int,memo nvarchar(40))go insert into ...
- MySQL 8 mysql system schema
在大的分类上:mysql schema包括存储数据库对象元数据的数据字典表和用于其他操作目的的系统表 数据字典表和系统表一般使用InnoDB存储引擎 与之前的版本不同,数据字典表和系统表存储在数据目录 ...
- 嵊州D2T4 十七个中毒的英国人 poisoning
嵊州D2T4 十七个中毒的英国人 poisoning 利内罗女士准备来到意大利进行修行. 意大利由 n 个城市和 m 条道路构成,道路是双向的. 到达第 i 个城市时,她可以取得该城市的全部信仰,并获 ...
- yii2 response响应配置
response参数配置 方式一.全局配置 用于接口开发 适用:只有所有请求都是application/json类型时可用. $config = [ 'components' => [ 'res ...
- Java(三)String类
一.String类初始化方法 1.初始化一个空字符串 String str=new String();//这里调用了String的无参构造方法 2.初始化一个有值的字符串 String str1=&q ...
- 数据结构与算法之比较排序【Java】
比较排序与非比较排序的对比 常见的快速排序.归并排序.堆排序.冒泡排序等属于比较排序.在排序的最终结果里,元素之间的次序依赖于它们之间的比较.每个数都必须和其他数进行比较,才能确定自己的位置.在冒泡排 ...
- 遇到的错误:Mysql 报错Duplicate entry '值' for key '字段名'的解决
### Error updating database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolatio ...