vue升级之路之vue-router的使用教程

2023年6月11日上午10:15 • JavaScript

在Vue.js开发项目中，Vue Router是一个不可或缺的库。它为我们提供了一种方便的方式来管理应用程序的的路由和控制页面的显示内容。本文将提供“Vue升级之路之Vue Router的使用教程”，供大家参考。

安装Vue Router

我们可以使用npm来安装Vue Router，使用以下命令：

npm install vue-router

创建Vue Router实例

创建Vue路由器实例之前，先确保已经在你的项目中引入Vue和Vue Router：

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

Vue.use(VueRouter)

创建Vue Router实例并配置路由：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

我们可以配置多个路由，在route数组中配置即可。

路由钩子函数

路由钩子函数是Vue Router提供的一顶强大武器，可以在路由变化的时候帮助我们进行逻辑处理，包括路由跳转前进行身份验证、记录页面访问量等等。

在路由选项中，我们可以定义以下几个钩子函数：

beforeEach(to, from, next)：在路由跳转之前调用，可以在这里进行身份验证等操作。使用next()方法进行路由跳转，或使用next(false)，取消路由跳转。
afterEach(to, from)：在路由跳转之后调用，可以在这里进行页面统计等操作。
beforeEnter(to, from, next)：在路由跳转之前调用，可以为某个路由单独定义钩子函数。

以下是一个关于路由身份验证的示例：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const isAuthenticated = false
    if (isAuthenticated) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

以上示例中，record.meta.requiresAuth用于判断某个路由是否需要身份验证，如果需要，判断当前是否已经登录，如果已登录，调用next()方法进行路由跳转，如果未登录，则跳转到登录页，并传递一个重定向参数。

路由参数

除了常规的路由参数，我们还可以使用路由参数来动态地展示内容。例如，我们可以使用:id来匹配路径中的id参数：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',  // 匹配 /user/123
      component: User
    }
  ]
})

在组件中获取参数：

export default {
  mounted() {
    console.log(this.$route.params.id) // 打印：'123'
  }
}

在上面的示例中，我们定义了一个路由，用于匹配形如/user/123的路径，然后在组件内使用this.$route.params对象来获取路由参数。

嵌套路由

有时候我们希望将一个组件作为另一个组件的子组件来使用。例如，一个Blog组件可能拥有多篇子文章，我们可以将每个文章组件都使用Blog组件作为父组件。

这时，我们需要使用嵌套路由，在父路由中定义子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/blog',
      component: Blog,
      children: [
        {
          path: 'post/:id',
          component: Post
        }
      ]
    }
  ]
})

在上面的示例中，我们定义了一个Blog路由，然后在该路由中定义了一个子路由，用于匹配类似于/blog/post/123的路径。我们可以在子组件内使用this.$route.params对象来获取路由参数。