Vue -- vue-全局导航守卫

---

为什么要使用导航守卫？

我们来考虑一个需求:在一个SPA应用中,如何改变网页的标题呢?
网页标题是通过<title> 来显示的,但是SPA只有一个固定的HTML,切换不同的页面时,标题并不会改变;但是我们可以通过JavaScript来修改<title>的内容 window.document.title = ‘新的标题’;那么在Vue项目中,在哪里修改呢?什么时候修改比较合适呢?
普通的修改方式:

• 我们比较容易修改标题的位置是每一个路由对应的组件.vue文件中;
• 通过created声明周期函数,执行对应的代码进行修改即可;
  如图所示:
  

但是每一页都这样创建会显得比较冗余,优化方案: 可以使用全局导航守卫

全局守卫

什么是导航守卫?

vue-router 提供了导航守卫;主要用来监听路由的进入和离开的; vue-router 提供了前置钩子beforeEach 和后置钩子 afterEach 的钩子函数,他们会在路由即将被改变前和改变后触发.
上例可以使用beforeEach来完成标题的修改.
首先,我们可以在钩子当中定义一些标题,可以利用meta(元数据)来定义; 其次,利用导航守卫,修改我们的标题;如图所示: