纯小白入手 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()
  }

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

==========================

路由还有 路由元信息 过渡动效 数据获取 滚动行为 路由懒加载 等内容，由于并不复杂，官方教程讲等很详细，在此便不再介绍。

关于路由初级学习便到此为止。

到目前位置已经学会 路由和组件，实际上已经可以写出来不太复杂的 vue 应用，比如博客，数据库管理系统等。

到后面我就来写一个数据库管理系统 ( 其中涉及后台 koa2 的应用，请自行学习 )。