Vue Router 新手入门指南（2）：路由跳转的方法及如何携带参数

2024-01-09 04:07:33

一、路由跳转的方法

在 Vue Router 中，可以通过以下几种方式进行路由跳转：

<#a#>a</#a>标签跳转：这是最简单的一种路由跳转方式，只需要在<#a#>a</#a>标签的href属性中指定要跳转的路由路径即可。比如：

<a href="/about">关于我们</a>

router-link组件跳转：router-link组件是 Vue Router 提供的一种专门用于路由跳转的组件。相较于<#a#>a</#a>标签跳转，router-link组件提供了更多的配置选项，比如：

<router-link to="/about">关于我们</router-link>

vm.$router.push()方法跳转：vm.$router.push()方法是 Vue Router 提供的一种直接跳转路由的方法。相较于前两种方式，vm.$router.push()方法更加灵活，可以动态地跳转到任意路由。比如：

vm.$router.push('/about')

二、如何携带参数

在路由跳转时，经常需要携带一些参数，比如用户ID、商品ID等。在 Vue Router 中，可以通过以下几种方式携带参数：

查询参数：查询参数是最简单的一种参数携带方式，只需要在路由路径后面加上?号，然后跟着要携带的参数和值，比如：

/about?id=123

路由参数：路由参数是 Vue Router 提供的一种专门用于携带参数的机制。相较于查询参数，路由参数更加灵活，可以动态地携带任意参数，比如：

/about/:id

在组件中，可以通过$route.params对象获取路由参数，比如：

export default {
  data() {
    return {
      id: this.$route.params.id
    }
  }
}

路由元信息：路由元信息是 Vue Router 提供的一种可以携带任意数据的机制。相较于查询参数和路由参数，路由元信息更加灵活，可以携带任意类型的数据，比如：

const routes = [
  {
    path: '/about',
    component: About,
    meta: {
      requireAuth: true
    }
  }
]

在组件中，可以通过$route.meta对象获取路由元信息，比如：

export default {
  data() {
    return {
      requireAuth: this.$route.meta.requireAuth
    }
  }
}

三、路由守卫

路由守卫是 Vue Router 提供的一种可以控制路由跳转的机制。通过路由守卫，可以实现以下功能：

权限控制：可以控制哪些用户可以访问哪些路由。
数据预取：可以在路由跳转前预取所需的数据，从而提高页面的加载速度。
表单验证：可以在路由跳转前对表单数据进行验证，从而防止用户提交无效数据。

在 Vue Router 中，可以通过以下几种方式定义路由守卫：

全局路由守卫：全局路由守卫可以应用于所有的路由。可以通过router.beforeEach()方法来定义全局路由守卫，比如：

router.beforeEach((to, from, next) => {
  // 如果用户未登录，则跳转到登录页面
  if (!vm.$store.getters.loggedIn) {
    next('/login')
  } else {
    next()
  }
})

路由独享守卫：路由独享守卫只适用于某个特定的路由。可以通过route.beforeEach()方法来定义路由独享守卫，比如：

const routes = [
  {
    path: '/about',
    component: About,
    beforeEach(to, from, next) {
      // 如果用户未登录，则跳转到登录页面
      if (!vm.$store.getters.loggedIn) {
        next('/login')
      } else {
        next()
      }
    }
  }
]

组件内守卫：组件内守卫可以应用于某个特定的组件。可以通过beforeRouteEnter()、beforeRouteUpdate()和beforeRouteLeave()这三个生命周期钩子函数来定义组件内守卫，比如：

export default {
  data() {
    return {
      id: this.$route.params.id
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在路由进入组件前调用
    // 如果用户未登录，则跳转到登录页面
    if (!vm.$store.getters.loggedIn) {
      next('/login')
    } else {
      next()
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 在路由更新组件前调用
    // 如果用户未登录，则跳转到登录页面
    if (!vm.$store.getters.loggedIn) {
      next('/login')
    } else {
      next()
    }
  },
  beforeRouteLeave(to, from, next) {
    // 在路由离开组件前调用
    // 如果用户未登录，则跳转到登录页面
    if (!vm.$store.getters.loggedIn) {
      next('/login')
    } else {
      next()
    }
  }
}