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. ...
随机推荐
- Java连载88-HashSet集合与hashCode方法重写
一.Set集合 1.HashSet底层实际上是一个HashMap,HashMap底层采用了哈希表数据结构. 2.哈希表又称为散列表,哈希表底层是一个数组,这个数组中每一个元素是一个单向链表,每个单向链 ...
- JS高阶编程技巧--惰性函数
在vue.react等框架大量应用之前,我们需要使用jQuery或者原生js来操作dom写代码,在用原生js进行事件绑定时,我们可以应用DOM2级绑定事件的方法,即:元素.addEventListen ...
- [MongoDB]MongoDB的ObjectId组成
一.ObjectId的组成首先通过终端命令行,向mongodb的collection中插入一条不带“_id”的记录.然后,通过查询刚插入的数据,发现自动生成了一个objectId“5e4fa350b6 ...
- Python中关于日期的计算总结
1.获取当前时间的两种方法: 代码如下: import datetime,timenow = time.strftime("%Y-%m-%d %H:%M:%S")print now ...
- js有关字符串拼接问题
我们经常写代码要遇见要拼接字符串,比如说我们要把 "yyy" 和一个动态数字拼接,接下来我们怎么办? 其实我们都会想到直接用“yyy” + 一个数字不就可以了吗? 对的, ...
- mysql升级到5.7
最近遇到一个问题,执行下列语句会报错: CREATE TABLE `t_user` ( `USER_ID` bigint() NOT NULL AUTO_INCREMENT COMMENT '用户ID ...
- 在csv表格中修改/追加某行数据
思路: 文本文件不能随意穿插信息,但是通过使用Seek()方法,可以在读取文本文件中移动光标从而修改所要修改的行. 思路步骤: 1.读取文件,打开csv文件,获取文件流,seek移动光标到开始, fo ...
- C#最基本的Socket编程
示例程序是同步套接字程序,功能很简单,只是客户端发给服务器一条信息,服务器向客户端返回一条信息,是一个简单示例,也是一个最基本的socket编程流程. 简单步骤说明: 1.用指定的port, ip 建 ...
- LeetCode 728. 自除数
题目链接:https://leetcode-cn.com/problems/self-dividing-numbers/ 给定上边界和下边界数字,输出一个列表,列表的元素是边界(含边界)内所有的自除数 ...
- flex 属性
一.flex-direction(元素排列方向) 1.flex-direction:row://从左到右排列 2.flex-direction:column://从上往下排列 二.flex-wrap( ...