路由的钩子函数
全局守卫(全局影响)
- router.beforeEach : 这是最常用的全局守卫,它会在路由跳转之前被调用。可以用来做一些如身份验证、日志记录、设置页面标题等全局性的事务处理。该函数接收三个参数
to, from, next
,其中to
表示即将进入的目标路由对象,from
表示离开的路由对象,而next
是一个函数,调用next()
则进入下一个钩子(如果有的话)或者确认导航的有效性。
js
router.beforeEach((to,from,next)=>{
document.title = to.meta.title //标题,在路由添加meta可以改页面标题
//判断是否登陆
if(to.path !== '/'){
const isLogin = localStorage.getItem('isLogin')
if(isLogin){
next()
}else{
router.push('/login')
alert('请先登陆')
return
}
}
next()
})
- router.beforeResolve : 这个钩子在
beforeEach
之后被调用,它等同于beforeEach
,但是它确保所有异步路由组件都被解析之后才被调用。这对于依赖于异步组件数据的路由守卫特别有用。 - router.afterEach : 与
beforeEach
相对,afterEach
守卫没有next
函数,不会改变导航本身,它主要用于路由确认跳转之后的操作,比如结束进度条、加载动画、下载软件等。
独享守卫(局部影响)
- beforeEnter : 这是定义在路由配置上的守卫,只有当访问这个路由时才会被调用,它的参数和全局前置守卫
beforeEach
相同。
js
const routes = [
{
path: '/about',
name: 'About',
compoent: () => import('../views/About.vue'),
//独享守卫
beforeEnter:(to,from,next)=>{
next()
}
}
]
组件内的守卫(引入该函数)
- onBeforeRouteEnter
-
作用:在路由进入该组件之前调用,此时组件实例还没有被创建。
-
应用场景:
- 验证用户权限,决定是否允许用户进入该页面。
- 提前进行数据预加载,以便在进入页面时快速渲染。
- 设置页面级别的元信息,如标题。
- onBeforeRouteUpdate
-
作用 :在当前路由改变,但该组件被复用时调用(例如,当路由参数改变时,比如从
/user/1
到/user/2
)。 -
应用场景:
- 根据新的路由参数更新页面内容。
- 重新获取数据,确保显示的内容是最新的。
- onBeforeRouteLeave
-
作用:在离开该组件的对应路由时调用。
-
应用场景:
- 阻止意外导航(例如,表单未保存时警告用户)。
- 执行清理操作,如取消事件监听器或定时器。
- 保存组件状态,以便下次返回时可以恢复。
vue.js
//离开页面
onBeforeRouteLeave((to, from, next) => {
console.log(to, from);
const flag = window.confirm('你确定要离开这个页面吗?')
if (flag) {
next()
}
})
keep-alive
<keep-alive>
是Vue提供的一个抽象组件,用于保存组件状态或避免重新渲染。 可以直接调用的函数
- onActivated : 当组件被
<keep-alive>
缓存的组件激活时调用。 - deactivated: 当组件被切换出去,进入非激活状态时调用。
这两个钩子函数对于管理缓存组件的状态非常有用。例如,你可能想要在组件被激活时刷新数据,在组件被停用时停止某些活动(如定时器)。