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 的应用，请自行学习 )。
