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 函数,也不会改变导航本身
补充
-
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用 beforeRouteLeave 守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
-
路由独享守卫
beforeEnter,进入组件时执行 -
组件内的守卫
- beforeRouteEnter(to, from, next)在渲染该组件的对应路由被 confirm 前调用,不能获取组件实例
this
,因为当守卫执行前,组件实例还没被创建 - beforeRouteUpdate(to, from, next)在当前路由改变,但是该组件被复用时调用,可以访问组件实例
this
- beforeRouteLeave(to, from, next)导航离开该组件的对应路由时调用,可以访问组件实例
this
- beforeRouteEnter(to, from, next)在渲染该组件的对应路由被 confirm 前调用,不能获取组件实例
-
meta(原数据):描述数据的数据