九、全局导航守卫 ------ 2019-09-21

1、什么是导航守卫：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
这是官方给的解释，也没总结出一个准确的定义，我自己的使用理解就是在路由跳转之前或者之后会触发的一个vue-router内置的函数，在这个函数里我们一般可以拿到两个参数：
（1）from：从哪个路由跳转的，起始路由；
（2）to：跳到哪一个路由，目标路由；
这样我们就可以在被触发的函数中做一些事情了；

2、全局前置导航守卫的一个需求：一个单页面Vue项目，项目有一百个页面，现在要给这个一百个页面添加不同的title属性；

/* 分析：一百个页面，怎么加？如果是一个个的HTML文件，我们还可以一个一个改HTML文件的title；
这个时候我们就可以使用全局前置导航守卫来实现这个功能
*/
//（1）全局前置导航守卫是添加到vue-router对象身上的：
router.beforeEach((to, from, next)=>{
  console.log('当前路由:', from)
  console.log('目标路由', to)
  next(); // next方法必须要手动调用，只有我们调用了路由才会跳转
})

// 每个守卫方法接收三个参数：
// to: 即将要进入的目标
// from: 当前导航正要离开的路由
// next: 一定要调用该方法来 **resolve** 这个钩子。执行效果依赖 `next` 方法的调用参数。

//（2）目标路由to是一个对象，这个对象身上有很多属性：
{
  fullPath: "/member"
  hash: ""
  matched: [{…}]
  meta: {}
  name: undefined
  params: {}
  path: "/member"
  query: {}
  __proto__: Object
}

// 其中这个meta属性是我们在配置路由规则的时候可以配置的一个属性：
{
  path: '/member',
  component: MemberContainer,
  meta:{
    title:"会员中心"
  }
},
// 这时这个meta属性的值就不再是空对象了，而是：meta: {title: "会员中心"}，
// 我们就可以设置页面的title属性了；

router.beforeEach((to, from, next)=>{
  next();
  console.log('当前路由:', from, '目标路由', to)
  document.title = to.meta.title
})

/*
这个钩子函数会在路由跳转之前触发，并将这个项目的HTML文件中的title属性改成目标路由中配置的
meta属性的值，项目只有一个HTML文件，这时所有的路由的title属性都是相同的，只不过我们设置的
title是我们想让目标路由显示的罢了；
*/

// （2）起始路由to也是一个对象：
{
  fullPath: "/home"
  hash: ""
  matched: [{…}]
  meta: {}
  name: undefined
  params: {}
  path: "/home"
  query: {}
  redirectedFrom: "/"
}


// 3、当我们使用的是嵌套路由的时候这个时候如果直接使用meta属性就会有问题，因此我们项目中使用
// 的应该是matched属性中的meta属性
matched: {
 [ 
  beforeEnter: undefined
  components: {default: {…}}
  instances: {default: undefined}
  matchAs: undefined
  meta: "首页"
  name: undefined
  parent: undefined
  path: "/home"
  props: {}
  redirect: undefined
  regex: /^\/home(?:\/(?=$))?$/i
  __proto__: Object
 ]
}

router.beforeEach((to, from, next)=>{
  next();
  console.log('当前路由:', from, '目标路由', to)
  document.title = to.mached[0].meta.title
})

2、全局后置钩子函数 afterEach()

router.afterEach((to, from) => {
    console.log('触发了后置钩子', to, from);
})

/*
1、这个函数调用的时机：这个函数会在路由已经跳转后触发的，但是还没有到达目标路由，
只是路由已经被resolve了；
2、全局后置钩子函数，接收两个参数：to，from，意义和全局前置守卫相同；
*/