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. ...
随机推荐
- Centos7之selinux配置
selinux是一个重要的lunux安全机制,存在于linuxKernel中,默认是开启的,会对用户行为做出多种限制,为了方便操作,有时候需要关闭它: 查看selinux状态:/usr/sbin/se ...
- idea websorm 激活码(2020-1-6 实测可用)最新
2019年1月6日用 ZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN1cnJlbnR ...
- \n不换行
\n在js中表示换行,<br/>在html中表示换行,所以如果在设置innerHtml值时使用 \n ,那么在页面上并不会显示换行,而在设置innerText值时使用 \n 就会显 ...
- React HOC(高阶组件)
一.定义 高阶函数:函数接受函数作为输入,或者输出一个函数. 高阶组件:接受React组件作为输入,或是输出一个组件.即hocFactory:: W: React.Component => E: ...
- 展讯平台uboot启动流程
启动流程 1. Stage1 start.S代码结构 u-boot的stage1代码通常放在start.S文件中,用汇编语言,主要实现功能如下: (1) 定义入口: 该工作通过修改连接器脚本来完成. ...
- Django---Django连接Mysql数据库
前面介绍了Django平台的数据交互,这些数据都是在本地存放着,修改内容或者重新启动服务,数据就消失了,如果我们把数据存放在数据库中,不就保存了吗? Django数据库 Django中自带的也有数据库 ...
- java学习笔记之IO编程—字节流和字符流
1. 流的基本概念 在java.io包里面File类是唯一一个与文件本身有关的程序处理类,但是File只能够操作文件本身而不能操作文件的内容,或者说在实际的开发之中IO操作的核心意义在于:输入与输出操 ...
- 手写mybatis框架笔记
MyBatis 手写MyBatis流程 架构流程图 封装数据 封装到Configuration中 1.封装全局配置文件,包含数据库连接信息和mappers信息 2.封装*mapper.xml映射文件 ...
- java连接Sqlserver数据库问题总结
网上说的要在:Sqlserver配置管理器中设置SQL Server网络配置->SQLEXPRESS的协议->TCP/IP的方法试了没啥用 不知道是不是自己测试设置的时候改了啥参数给整好了 ...
- P1462 通往奥格瑞玛的道路【二分+Dij】
P1462 通往奥格瑞玛的道路 提交 29.89k 通过 6.88k 时间限制 1.00s 内存限制 125.00MB 题目提供者gconeice 难度提高+/省选- 历史分数100 提交记录 查看题 ...