vue之全局导航守卫17

title动态改变

网页标题是通过<title>来显示的, 但是SPA只有一个固定的html文件，切换不同的页面时，title并不会改变。我们可以通过window.document.title = '新的标题'来修改title的内容。

普通的修改方法

在每一个路由对应的组件.vue文件中，通过created或mounted声明周期函数，执行代码document.title='new title'进行修改即可。

缺点：当页面较多时, 这种方式不容易维护。

使用导航守卫

vue-router提供的导航守卫主要用来监听监听路由的进入和离开。

vue-router提供了beforeEach、afterEach钩子函数, 它们会在路由即将改变前和改变后触发。

方法1，展示每个组件的title

在index.js中

效果

方法2，展示每个父组件的title

效果



同理

导航守卫

监听路由跳转过程，beforeEach中必须要调用next()

router.beforeEach(function(to,from,next){
//	form到to
	document.title = to.matched[0].metatitle
	next();//必须要有,且不能更名
})

• 全局前置钩子：beforeEach(to,from,next)路由跳转之前执行

• 全局解析钩子：beforeResolve()在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，被调用

• 全局后置钩子：afterEach(to,from)不会接受 next 函数，也不会改变导航本身

补充

• 完整的导航解析流程

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

• 路由独享守卫
  beforeEnter，进入组件时执行

• 组件内的守卫

  • beforeRouteEnter(to, from, next)在渲染该组件的对应路由被 confirm 前调用，不能获取组件实例this，因为当守卫执行前，组件实例还没被创建
  • beforeRouteUpdate(to, from, next)在当前路由改变，但是该组件被复用时调用，可以访问组件实例 this
  • beforeRouteLeave(to, from, next)导航离开该组件的对应路由时调用，可以访问组件实例 this

• meta(原数据)：描述数据的数据