vue2路由导航守卫怎么实现

Vue2中的路由导航守卫可以通过在定义路由时设置beforeEach、beforeResolve、afterEach等钩子函数来实现。

其中，beforeEach钩子函数在路由跳转前被调用，可以用于进行权限验证、登录状态判断等操作；beforeResolve函数在导航被确认之前，同时在所有组件内守卫和异步路由被解析之后被调用，可以用于进行数据加载等操作；afterEach函数在导航被确认后调用，可以用于进行页面统计等操作。

下面是一个示例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断是否需要登录权限
    if (!isLogin()) {
      // 未登录则跳转到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

在上面的示例中，我们定义了一个beforeEach钩子函数，用于判断路由是否需要登录权限，如果需要登录权限则判断用户是否已登录，如果未登录则跳转到登录页面，否则正常跳转。注意需要在路由实例化之后调用beforeEach函数。