〖Vue〗小知识- Vue-Router路由钩子函数(导航守卫)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文我们学习 Vue-Router 的编程式导航, 本文来学习 Vue-Router 的路由勾子函数, 可通过 路由勾子进行定义跳转前的拦截逻辑操作.

Vue-Router 路由钩子函数

按照钩子的分类, 大家可以方便记忆的方法:

213: 2 个导航守卫, 1 个路由独享守卫, 3 个组件内守卫, 和我 name 一样,是不是记住我 name 的同时, 也记住了路由的 6 个导航守卫钩子函数! 好记/是不是已经记牢了.

路由的钩子函数（导航守卫)

router.beforeEach (全局前置守卫: 常用于登陆前的校验操作逻辑) router.afterEach ( 比方说: 根据路由的 path 动态改遍标题, 不同页面显示对应的页面标题内容)

可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({
  // ...
})

router.beforeEach((to, from, next) => {
  // to 包含要跳转到的页面的地址
  // from : 从哪里跳转过来的.
  // next : 才会进行下一步的跳转
  // ... 这里对跳转前进行一些处理, 比方说权限的校验, 没有权限就不能往下一页面的跳转
})

路由独享守卫

beforeEnter

组件内的守卫

beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave

路由的使用: 登陆 (权限路由)

1. 找到匹配的路由( to.matched[0] )
2. 找到匹配的路由的 meta 里的变量(login）的布尔值

如果为 true

如果没有登陆 就跳转到登陆页面

如果登陆了 跳转到匹配的路由的组件

小预告

下文就要学习 Vue 的组件间的 全局通信方案: Vuex

cnpm i vuex --save

建立一个仓库 在 src 中建立 store文件夹, 建立文件index.js

有需要在谷歌里面安装 vue`开发者工具