纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html
尽量把纷繁的知识,肢解重组成为可以堆砌的知识。
学会工具并不难,思考如何运用这些工具,才是编程或者工作中最难的部分。
我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。
==========================
导航守卫是 vue 中很关键的内容之一。路由是否能够切换,怎么切换,都由它来把关 ( 用它来把关,可以使得程序架构脉络清晰 )。注:路由的切换实际也可以用 router.push 这个方法来进行控制,但是会使得应用变得难以维护。
导航守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
官网的定义的理解:
1、守卫导航是什么意思?
路由切换是指切换渲染内容,对于有些程序来说,比如后台具有权限管理的系统来说,有些组件只对某些权限的用户开放。没有权限的用户想要导航到这个组件的路由,是不被许可的。这就是守卫导航。
2、跳转和取消的方式。
有些路由经过导航守卫程序过滤之后,不能被渲染,那就需要告诉程序下一步的流程。
取消路由导航是一般的做法。跳转则是比较特殊的做法。
全局守卫
const router = new Router({ routes: [{
path: '/',
name: 'home',
component: Home
}, {
path: '/form',
name: 'forms',
component: Forms
}, {
path: '/about/:id',
name: 'about',
// 路由级别的代码分离 (懒加载组件)
// 下列代码会生成一个 (about.[hash].js) 分离代码包
// 并在当前路由激活时才加载该组件
component: () => import('./views/About.vue'),
children: [{
path: '1',
component: HelloWorld,
props: (router) => ({ msg: router.query.msg })
}]
}] }) router.beforeEach((to, from, next) => {
console.log(to, from)
next()
})
全局路由导航守卫 ( 上述红色部分 ),to 和 from 都是路由实例。
next() 必须调用,没有这个 next() 有什么后果注释掉便一清二楚 ( 整个 vue 应用宕机 )。
next(false) 中断当前的导航
next('/') 跳转到一个不同的地址
next(error) 导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
还有 router.beforeResolve 与 router.beforeEach
类似。
局部守卫
path: '/',
name: 'home',
component: Home,
beforeEnter: (to, from, next) => {
console.log('路由-前置-钩子')
next()
}
参数和功能与全局的一样。
组件内守卫
beforeRouteEnter (to,from,next) {
console.log('组件-前置-钩子')
next()
},
beforeRouteUpdate (to,from,next) {
console.log('组件-复用-钩子')
next()
},
beforeRouteLeave (to,from,next) {
console.log('组件-离开-钩子')
next()
}
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter
守卫中传给next
的回调函数。
==========================
路由还有 路由元信息 过渡动效 数据获取 滚动行为 路由懒加载 等内容,由于并不复杂,官方教程讲等很详细,在此便不再介绍。
关于路由初级学习便到此为止。
到目前位置已经学会 路由和组件,实际上已经可以写出来不太复杂的 vue 应用,比如博客,数据库管理系统等。
到后面我就来写一个数据库管理系统 ( 其中涉及后台 koa2 的应用,请自行学习 )。
纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫的更多相关文章
- 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )
vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study ...
随机推荐
- 微信开发-PC调试-JS-SDK功能之分享功能调试
一般涉及和第三方的开发调试,都会比较麻烦些.不过,像微信这样的大公司呢,产品技术是过硬的,所以,基本上只要自己把文档看仔细了,弄好了,基本就没有问题了. 对于后端接口一类的调试,主要就是通过打印访问日 ...
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Shell - 简明Shell入门
本文以示例和注释的方式,对Shell编程的基本知识点进行了总结和回顾,所有脚本均已做了基本的调试和验证. Shell - 简明Shell入门 01 - 第一个脚本 脚本的定义.执行方法以及echo命令 ...
- :nth-child(n)选择器
p:nth-child(n) 选择属于父元素的第n个子元素的每个p标签
- Spring Boot - Profile配置
Profile是什么 Profile我也找不出合适的中文来定义,简单来说,Profile就是Spring Boot可以对不同环境或者指令来读取不同的配置文件. Profile使用 假如有开发.测试.生 ...
- [视频]K8飞刀 HackerIE自动检测网站注入教程
[视频]K8飞刀 HackerIE自动检测网站注入教程 https://pan.baidu.com/s/1c08rihi
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- 30 个java编程技巧
1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 ”if else” 判断null元素. Java 的 ...
- 在Ubuntu中搭建KMS服务器
介绍 基于vlmcsd搭建的KMS服务器. 根据github上的说明,这个工具是用C写的,没有任何依赖,可以直接运行.而且它横跨几乎现在所有的系统平台,如Android, FreeBSD, Solar ...
- Spring Security OAuth笔记
因为工作需要,系统权限安全方面可能要用到Spring Security OAuth2.0,所以,近几天了解了一下OAuth相关的东西.目前好像还没有系统的学习资料,学习主要是通过博客,内容都是大同小异 ...