纯小白入手 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 的应用,请自行学习 )。