详解vue-router导航守卫

2023年6月11日上午11:08 • JavaScript

下面就详细讲解下“详解vue-router导航守卫”的完整攻略。

什么是vue-router导航守卫？

vue-router导航守卫分为全局守卫和路由独享守卫，可以在导航过程中拦截和控制，用来控制页面跳转、权限校验等操作。可以通过导航守卫来判断用户是否有权限访问某个页面，或者在某个页面离开时做数据清理等操作。

导航守卫一共包含三种类型：全局前置守卫、全局后置钩子和路由独享钩子。

全局前置守卫

全局前置守卫会在每次路由切换之前都会执行，常用于做全局的权限验证等操作。可以通过router.beforeEach函数来定义全局前置守卫。

router.beforeEach((to, from, next) => {
  // 可以通过to和from来获取路由相关信息
  // next函数用来跳转到下一个路由，next()表示放行，next(false)表示中断当前路由跳转，next('/')表示跳转到指定路由
})

下面我们来举个例子，假设我们的网站需要用户登录之后才能访问页面。那么就需要在全局前置守卫中判断用户是否已经登录，如果未登录，则跳转到登录页面：

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') // 判断用户是否已登录
  if (to.path === '/login') { // 如果是登录页面，则直接放行
    next()
  } else { // 如果是其他页面，则需要进行登录校验
    isLogin ? next() : next('/login') // 如果已登录，则直接放行，否则跳转到登录页面
  }
})

全局后置钩子

全局后置钩子会在每次路由切换之后执行，可以用来做页面计数器、添加动画等操作。可以通过router.afterEach函数来定义全局后置钩子。

router.afterEach((to, from) => {
  // 可以通过to和from来获取路由相关信息
})

下面我们来举个例子，假设我们需要对每个页面的访问次数进行计数，并记录到数据库中：

router.afterEach((to, from) => {
  axios.post('/record', { path: to.path, count: 1 }) // 将页面路径和访问次数记录到数据库
})

路由独享钩子

路由独享钩子就是只在某个路由的进入和离开时被调用。可以在定义路由时通过beforeEnter属性来定义路由独享钩子。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      beforeEnter: (to, from, next) => {
        // 可以通过to和from来获取路由相关信息
        // next函数用来跳转到下一个路由，next()表示放行，next(false)表示中断当前路由跳转，next('/')表示跳转到指定路由
      }
    }
  ]
})

下面我们来举个例子，假设我们需要在某个路由离开前将页面的滚动位置记录下来，以便于再次进入时恢复滚动位置：

{
  path: '/list',
  name: 'list',
  component: List,
  beforeEnter: (to, from, next) => {
    localStorage.setItem('scrollPosition', window.pageYOffset) // 在路由离开前将页面滚动位置记录到localStorage中
    next()
  }
},
{
  path: '/detail/:id',
  name: 'detail',
  component: Detail,
  beforeEnter: (to, from, next) => {
    const scrollPosition = localStorage.getItem('scrollPosition') // 在路由进入前将页面滚动位置恢复到上次记录的位置
    if (scrollPosition) {
      setTimeout(() => {
        window.scrollTo(0, scrollPosition)
      }, 0)
    }
    next()
  }
}