Vue Router详解

_XU
277 阅读4分钟

Vue.js 是一个流行的前端 JavaScript 框架，专注于构建交互式用户界面。Vue Router 是 Vue.js 的官方路由管理库，与 Vue.js 核心深度集成，使单页应用程序的开发变得轻而易举。在本文中，我们将深入研究 Vue Router，探讨其主要功能，并提供实例代码。

Vue Router 简介

Vue Router 用于管理 Vue.js 单页应用程序中的路由。路由的简单定义是将 URL 映射到组件上。在 Vue Router 中，我们可以使用嵌套路由映射、动态路由选择、模块化、基于组件的路由配置、路由参数、查询以及通配符等功能。

安装和配置 Vue Router

安装 Vue Router 很简单，只需在终端中运行以下命令：

npm install vue-router --save

安装完成之后，需要在项目入口文件中导入并使用 Vue Router，示例代码如下：

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

Vue.use(VueRouter)

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

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

在上述代码中，我们首先导入 Vue.js 和 Vue Router，然后使用 Vue.use(VueRouter) 来注册插件。接下来，我们创建一个新的 VueRouter 实例，并定义路由映射，其中 path 是 URL 路径，component 是将要渲染的组件。最后，我们通过实例化 Vue 对象将路由器和根组件传递给 Vue，使路由器起作用。

路由映射

在 Vue Router 中，路由映射是指将 URL 映射到一个或多个组件的过程。这可以通过使用路由器的 routes 选项来定义路由映射。例如：

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

在上述代码中，我们定义了两个路由映射，分别将 / 和 /about 的 URL 映射到 Home 组件和 About 组件上。当用户访问这些 URL 时，路由器会自动将组件渲染到视图中。

路由参数

有时候我们需要动态地映射路由，例如将 /:id 的 URL 映射到一个组件，其中 :id 是一个动态参数。在 Vue Router 中，我们可以使用如下方式定义路由参数：

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

在上述代码中，我们定义了一个路由映射，使 /post/:id 的 URL 映射到 Post 组件上，其中 :id 是动态参数。当用户访问像 /post/123 这样的 URL 时，路由器会自动将 123 作为参数传递给 Post 组件。

params 传参和 query 传参。

  • params 传参：类似于网络请求中的 post 请求，参数不会显示在地址栏中。使用冒号指定参数名，可以在路由定义中设置动态的参数值，例如：

    {
  path: "/user/:id",
  component: User
}

    在上述路由定义中，我们使用 :id 定义了一个名为 id 的路由参数，当用户访问 /user/123 这样的 URL 时，路由器会自动将 123 作为参数传递给 User 组件。获取路由参数时，可以通过 $route.params.id 来访问。

    • 参数无法针对单个参数设置默认值；
    • 路由组件只能接收单一参数。

  • query 传参：类似于网络请求中的 get 请求，参数会显示在地址栏中。使用 query 属性在路由定义中设置传递的参数，例如：

    {
  path: "/user",
  component: User,
  props: (route) => ({ id: route.query.id })
}

    在上述路由定义中，我们使用 query 属性来定义查询参数，并通过 props 属性将 id 参数传递给 User 组件。传递参数时，可以通过像这样手动添加参数到 URL 中来传递参数：/user?id=123。或者在代码中使用 $router.push({ path: "/user", query: { id: 123 } }) 来进行传递。获取路由参数时，可以通过 $route.query.id 来访问。

    • 可以传递多个参数；
    • 参数可以针对单个参数设置默认值；
    • 传递参数的方式较为麻烦，需要手动编写 URL 参数。

params 和 query 传参各有优缺点，需要根据使用场景来选择。如果只需要传递单一参数或者希望 URL 直接体现参数，可以使用 params 传参；如果需要传递多个参数或者需要为单个参数设置默认值，可以考虑使用 query 传参。

嵌套路由映射

在某些情况下，我们需要嵌套路由映射，例如将 /user/:id/profile 的 URL 映射到一个组件上。在 Vue Router 中，我们可以使用如下方式定义嵌套路由映射：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        }
      ]
    }
  ]
})

在上述代码中，我们首先定义了一个路由映射，将 /user/:id 的 URL 映射到 User 组件上，其中 :id 是动态参数。然后我们使用 children 选项来定义子路由映射，将 profile 的 URL 映射到 UserProfile 组件上。当用户访问像 /user/123/profile 这样的 URL 时，路由器会自动将参数 123 并传递给 User 组件和 UserProfile 组件。

路由导航守卫

在开发过程中，我们可能需要访问或修改路由跳转之前或之后的一些值。为了实现这种需求，Vue Router 提供了路由导航守卫。路由导航守卫包括 beforeEach、beforeResolve 和 afterEach 三种类型，在特定的路由操作过程中分别执行。

以下是一个使用 beforeEach 导航守卫的示例代码：

const router = new VueRouter({
  routes: [
    {
      path: '/protected',
      component: Protected
    }
  ]
})

router.beforeEach((to, from, next) => {
  // 判断用户是否已登录
  if (!user.isAuthenticated && to.path === '/protected') {
    next('/login')
  } else {
    next()
  }
})

在上述代码中，我们首先定义了一个路由映射，将 /protected 的 URL 映射到 Protected 组件上。然后我们使用 beforeEach 导航守卫来检查用户是否已登录，如果用户没有登录并且试图访问受保护的页面，则路由器会自动跳转到登录页。

总结

Vue Router 是 Vue.js 官方的路由管理库，能够轻松处理单页应用程序中的路由映射、参数、嵌套路由和导航守卫等功能。在本文中，我们介绍了 Vue Router 的主要功能并提供了示例。希望通过本文的介绍和实践，读者可以深入理解 Vue Router 并能够使用它构建出更加复杂和高效的单页应用程序。

avatar
文章
阅读
粉丝