一、beforeeach是什么?
beforeEach
是Vue.js提供的一个全局的导航守卫。它可以在跳转到一个路由前执行一些操作,让我们能够控制路由的跳转。
二、如何使用beforeeach?
在Vue3中,我们可以通过使用router.beforeEach
实例方法,向全局添加一个导航守卫。
// main.js import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [...] }) router.beforeEach((to, from, next) => { // do something before navigation next() })
在上述代码中,我们使用了createRouter
来创建路由实例,然后在实例中使用beforeEach
方法来添加一个导航守卫。在beforeEach
的参数中,它可以接收三个参数。
to
: Route: 即将要进入的目标Route
对象。from
: Route: 当前导航正要离开的路由。next
: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖next
方法的调用参数。
三、常见的使用场景
1、校验用户登录状态
在实际项目中,常常需要校验用户是否已经登录了。在使用beforeEach
方法时,我们可以在其中添加一个校验逻辑,来实现路由的跳转拦截。
// main.js import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [...] }) router.beforeEach((to, from, next) => { if (to.meta.auth && !isLogin) { next('/login') } else { next() } })
在上述代码中,to.meta.auth
表示需要登录才能访问的路由,isLogin
表示用户是否处于登录状态。如果用户未登录并且要访问需要登录才能访问的路由,则跳转到登录页面;否则放行。
2、路由切换时展示loading
在路由切换时,有时候需要一些视觉上的效果,比如加载一个loading。我们可以在beforeEach
中添加相应的逻辑,来控制loading的显示与隐藏。
// main.js import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [...] }) router.beforeEach((to, from, next) => { // show loading next() }) router.afterEach(() => { // hide loading })
在上述代码中,我们在beforeEach
中添加显示loading的逻辑,在路由跳转完成后,在afterEach
中添加隐藏loading的逻辑。这样,我们就能在路由切换时展示loading了。
3、路由动态添加title
在每个路由页面中,常常需要为页面添加一个标题。可以通过路由的meta属性来动态添加标题。
const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: Home, meta: { title: '首页' } // 添加 meta 属性 }, ... ] }) router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title // 修改网页标题 } next() })
在上述代码中,我们在每个路由的meta属性中添加了一个title属性,表示该路由的标题。在beforeEach
中,我们可以根据该meta属性来动态修改网页标题。
四、总结
本文详细讲解了Vue3中的beforeEach
导航守卫的作用和使用方法。同时,还介绍了一些常见的使用场景,包括校验用户登录状态、路由切换时展示loading、路由动态添加title等。希望对Vue3开发者有所帮助。