router.beforeEach()是Vue.js中的路由守卫,用于在路由跳转前进行校验、取消、重定向等操作。

基本使用:

const router = new VueRouter({ ... })
 
router.beforeEach((to, from, next) => {
  // ...
})

to: 即将要进入的目标路由对象

from: 当前导航正要离开的路由

next: 必须调用该方法来 resolve 这个钩子。它接受三个参数:

true: 进行管道中的下一个钩子,如果全部钩子完成,则导航会被确认。

false: 中断当前的导航。如果目标路由是一个重定向,那么会跳转到重新定向的路由。

(path|route object): 进行一个新的导航到一个不同的地址,这时候需要提供一个路径或者一个路由对象。

实例代码:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ path: '/login', query: { redirect: to.fullPath }})
  } else {
    next()
  }
})

这个例子中,如果用户没有登录,并且目标路由需要认证,那么用户会被重定向到登录页面,并且登录完成后会被重定向到原先想要访问的页面。

使用next传递参数:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ path: '/login', query: { redirect: to.fullPath }})
  } else {
    next()
  }
})

在这个例子中,如果用户尝试访问一个需要认证的页面,但是没有认证,那么用户会被重定向到登录页面,并且带上原先想要访问的页面的路径。

使用next(false)取消导航:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) {
    next(false)
  } else {
    next()
  }
})

在这个例子中,如果用户没有登录,并且尝试访问非登录页面,则会取消当前的导航。

使用next('/path')进行重定向:

router.beforeEach((to, from, next) => {
  if (to.name === 'Admin') {
    next('/home')
  } else {
    next()
  }
})

在这个例子中,如果用户尝试访问名为'Admin'的页面,则会被重定向到'/home'。

以上就是关于router.beforeEach()的几种常见用法,它是Vue.js路由守卫中的一个重要部分,可以用于处理各种路由守卫的需求。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐