vue2.x路由导航守卫案例

下面是一个Vue.js 2.x中使用路由导航守卫的案例：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true } // 添加 meta 字段，表示需要进行身份验证
    },
    // 其他路由配置...
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) { // 判断路由是否需要进行身份验证
    // 进行身份验证逻辑，比如检查用户是否登录
    if (userLoggedIn) {
      next() // 用户已登录，继续导航到目标路由
    } else {
      next('/') // 用户未登录，重定向到首页或登录页面
    }
  } else {
    next() // 路由无需进行身份验证，直接导航到目标路由
  }
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上述代码中，我们定义了一个VueRouter实例，并配置了多个路由。其中，`/dashboard` 路由配置中添加了 `meta` 字段，表示需要进行身份验证。

然后，我们使用 `router.beforeEach()` 注册了一个全局前置守卫。在守卫函数中，通过判断目标路由的 `meta` 字段来确定是否需要进行身份验证。如果需要验证身份，则可以在守卫函数中执行相应的逻辑，比如检查用户是否已登录。如果用户已登录，则调用 `next()` 继续导航到目标路由；如果用户未登录，则调用 `next('/')` 进行重定向，可以重定向到首页或登录页面。

最后，我们创建了一个Vue实例，并将路由实例传入，通过 `router-link` 和 `router-view` 实现路由的导航和渲染。

这个案例展示了如何使用路由导航守卫来实现身份验证的功能。在进入需要进行身份验证的页面时，会触发守卫函数进行判断，并根据判断结果进行相应的导航操作。