Vue-router前端路由(2)
Vue-router全局导航守卫:
为什么使用导航守卫:(修改网页标题)
- 网页标题是通过title来显示的,但SPA只有一个固定的HTML,切换组件无法修改title
- 但我们可以通过JavaScript来修改title的内容:document.title
- 这时就需要用到我们的导航守卫来实现这个动态修改
router.beforeEach函数的使用:
router.beforeEach()本身需要一个参数,从源码中可知该参数是一个函数
beforeEach(guard: NavigationGuard): Function
从源码中解读该guard函数本身同样包含三个参数(to, from, next)
export type NavigationGuard<V extends Vue = Vue> = (
to: Route,
from: Route,
next: NavigationGuardNext<V>
) => any
同时参数next本身又是一个函数:
export type NavigationGuardNext<V extends Vue = Vue> = (
to?: RawLocation | false | ((vm: V) => any) | void
) => void
另两个参数to和from的含义就是:从我们的from跳转到to,在这个跳转过程中便可实行我们改变title的操作。
to:即将要进入的目标的路由对象
from:当前导航即将要离开的路由对象
next:调用该方法后,才能进入下一个钩子
我们要做的是将页面title赋值为需要跳转到的界面to的title,然而to里面没有title这个属性,这时候我们再回到源码,发现to是一个route类型,而route类型就是router对象中的一个个路由映射,所以我们可以给每个路由映射里加上一个meta(元数据)属性,里面给上页面组件title
router.beforeEach((to, from, next) => {
document.title = to.meta.title
next()
})
然而当存在路由嵌套时,我们的to就会出现问题,因为嵌套的子路由并没有给它meta元数据,这时除了给子路由加上meta以外,还有另一个方法取得主路由的meta。
从下图可以发现,在当前to对象中meta属性是空的,但是在matched(对象数组)属性下的第一个对象matched[0]中,保存着我们主路由的meta,所以我们可以修改一下代码。来保证获取到当前页面的title。
router.beforeEach((to, from, next) => {
document.title = to.matched[0].meta.title;
console.log(to);
next();
})
之前我们所讨论的是router导航守卫的前置守卫(guard)beforeEach,接下来我们来讨论一下后置钩子(hook)afterEach
前置守卫是在路由跳转前回调,后置钩子则是路由跳转后回调
这是后置钩子的源码:(不含next函数)
afterEach(hook: (to: Route, from: Route) => any): Function
后置钩子的调用:
router.afterEach( (to, from) => {
console.log('---');
console.log(to);
console.log(from);
})
我们上面是用的导航守卫被称之为全局守卫
- 路由独享守卫
- 组件内的守卫
Vue-router-keep-alive
keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
route-view也是一个组件,如果直接被包在keep-alive里面,所有的路径匹配到的视图组件都会被缓存
activated和deactivated函数只有组件在keep-alive的情况下可以被调用
keep-alive两个重要的属性:
- include - 字符串或正则表达式,只有匹配的组件会被缓存
- exclude - 字符串或正则表达式,任何匹配的组件不会被缓存
*注:像exclude="profile,user"的写法,逗号后面不能加空格!!