详解Vue中的路由与多种守卫

在Vue中，路由是前端开发中非常重要的一个概念，它提供了页面之间切换的功能。而在实际开发中，为了更好的控制页面的访问权限和交互行为，我们需要使用路由守卫来进行相关的操作。

路由的基本概念

在Vue中，使用Vue Router来进行路由的管理。Vue Router是Vue.js官方提供的路由管理器，可以实现页面跳转、路由拦截等功能。

路由配置

首先，我们需要在路由文件中配置路由信息，以便Vue Router管理页面跳转。以下是一个示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('../views/home.vue')
  },
  {
    path: '/about',
    component: () => import('../views/about.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

• path: 页面路由路径，可以是字符串或者正则表达式。
• redirect: 路由重定向，如果用户访问了重定向的路由，Vue Router会把请求重定向到目标路由。
• component: 路由对应的组件。

路由跳转

在Vue中，使用router-link进行跳转，以下是一个示例：

<router-link to="/home">Home页面</router-link>
<router-link to="/about">About页面</router-link>

在页面中使用router-link组件，可以实现路由跳转，指定to属性为目标路由的path。

路由参数

在实际开发中，页面常常需要根据不同的参数展示不同的内容。在路由中，可以使用参数进行动态路由匹配。

以下是一个动态路由匹配的示例：

{
  path: '/user/:id',
  component: () => import('../views/user.vue'),
}

在上面的路由例子中，:id就是动态路由参数，可以通过$route.params.id来获取。

路由钩子函数

在路由跳转的过程中，我们可以使用路由钩子函数来进行一些自定义操作。Vue Router提供了三种路由钩子函数：

• 全局守卫
• 路由独享守卫
• 组件内守卫

全局守卫

全局守卫会对所有路由进行拦截，可以在路由跳转前后进行一些操作，例如验证用户是否登录等。

以下是一个全局守卫的示例：

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // to: 即将要进入的目标路由对象
  // from: 当前导航即将离开的路由对象
  // next: 进入到目标路由之前执行的函数，next()表示继续执行路由，next(false)表示中断当前路由，next('/')表示跳转到指定路由

  if (to.path === '/login') {
    next()
  } else {
    const token = sessionStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})

在上面的例子中，我们通过router.beforeEach()注册了一个全局前置守卫，通过to对象获取到目标路由的path，判断如果是登录路由则放行，否则检查用户是否登录，未登录则跳转到登录页面。

路由独享守卫

路由独享守卫只作用于某个路由，可以在该路由跳转前后进行一些操作，例如页面访问权限校验等。

以下是一个路由独享守卫的示例：

{
  path: '/admin',
  component: () => import('../views/admin.vue'),
  beforeEnter: (to, from, next) => {
    const token = sessionStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
}

在上面的路由例子中，我们通过beforeEnter属性来定义路由独享守卫，通过to对象获取到目标路由的path，判断用户是否登录，未登录则跳转到登录页面。

组件内守卫

组件内守卫只作用于当前组件，可以在该组件跳转前后进行一些操作，例如表单信息未保存提示等。

以下是一个组件内守卫的示例：

export default {
  data() {
    return {
      formData: {}
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.$route.meta.dirty) { // 如果表单信息有修改
      if (confirm('表单信息尚未保存，确定要离开页面吗？')) {
        next()
      } else {
        next(false) // 中断当前路由
      }
    } else {
      next()
    }
  }
}

在组件内使用beforeRouteLeave钩子函数来定义组件内守卫，如果表单信息有修改，弹出确认框提示用户是否离开页面，如果用户点击确定则继续路由跳转，否则中断路由跳转。

示例说明

示例1

在公司内部系统中，只有管理员才能访问管理员页面。以下是一个路由独享守卫的示例代码：

{
  path: '/admin',
  component: () => import('../views/admin.vue'),
  beforeEnter: (to, from, next) => {
    const token = sessionStorage.getItem('token')
    const role = sessionStorage.getItem('role')
    if (!token || role !== 'admin') {
      next('/login')
    } else {
      next()
    }
  }
}

在管理员页面路由中使用beforeEnter属性来定义路由独享守卫，判断用户是否登录和用户角色是否为管理员，若登录且角色为管理员则放行，否则跳转到登录页面。

示例2

在一个新闻编辑页面中，如果用户修改了表单信息但未保存，则在离开页面时提示用户是否离开。以下是一个组件内守卫的示例代码：

export default {
  data() {
    return {
      formData: {},
      dirty: false // 用来记录表单信息是否有修改
    }
  },
  methods: {
    saveData() {
      // 表单信息保存操作
      // ...
      this.dirty = false
    }
  },
  watch: {
    formData() {
      this.dirty = true
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.dirty) { // 如果表单信息有修改
      if (confirm('表单信息尚未保存，确定要离开页面吗？')) {
        next()
      } else {
        next(false) // 中断当前路由
      }
    } else {
      next()
    }
  }
}

在组件内使用beforeRouteLeave钩子函数来定义组件内守卫，使用dirty变量来记录表单信息是否有修改，在表单信息有修改时弹出确认框提示用户是否离开页面，用户点击确定则继续路由跳转，否则中断路由跳转。保存表单信息时需要将dirty标记为false。