Vue Router 学习笔记：通向单页面应用 (SPA) 的高效之道

2023-10-14 19:24:38

前言

单页面应用 (SPA) 已然成为现代前端开发的潮流，它通过在单个页面上动态加载和呈现不同内容，带来了流畅的用户体验和更高的应用程序性能。在 Vue.js 生态系统中，Vue Router 作为官方路由管理器，凭借与 Vue.js 的深度集成，让 SPA 的构建变得更加简单高效。

本篇 Vue Router 学习笔记（基础篇）将从入门基础出发，逐步探索 Vue Router 的核心概念和使用方法，带你领略 SPA 开发的魅力。我们将在接下来的章节中，逐一剖析 Vue Router 的路由配置、导航守卫、动态路由、嵌套路由等重要特性，助你掌握构建单页面应用的必备技能。

踏入 Vue Router 的世界

1. Vue Router 的本质：管理应用状态

Vue Router 的核心在于管理应用程序的状态。它通过跟踪 URL 的变化，来动态地更新应用程序的 UI，从而实现不同组件之间的无缝切换。这种状态管理机制，使单页面应用能够在不重新加载整个页面的情况下，呈现不同的内容，从而带来更佳的用户体验。

2. 安装与配置：开启 SPA 之旅

在使用 Vue Router 之前，我们首先需要安装它。可以通过以下步骤进行安装：

npm install vue-router

安装完成后，在 Vue.js 项目的 main.js 文件中进行配置：

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

// 使用 Vue Router
Vue.use(VueRouter)

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // ...其他路由规则
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 创建 Vue 实例并挂载到根元素
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

通过上述配置，我们便开启了 Vue Router 的 SPA 之旅。

路由配置：勾勒应用蓝图

路由配置是 Vue Router 的核心之一，它定义了应用程序的各个页面及其对应的组件。在路由配置中，我们可以使用 path 属性来指定路由的路径，使用 component 属性来指定要渲染的组件。例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  // ...其他路由规则
]

在上面的配置中，我们定义了两个路由规则：一个是根路径 / 对应的 Home 组件，另一个是 /about 路径对应的 About 组件。当用户访问根路径或 /about 路径时，Vue Router 会自动加载并渲染相应的组件。

导航守卫：掌控路由跳转

导航守卫是 Vue Router 提供的一套钩子函数，允许我们在路由跳转时执行一些自定义操作。通过导航守卫，我们可以实现权限控制、数据预取、页面加载指示器等功能。Vue Router 提供了三种类型的导航守卫：

全局导航守卫：适用于所有路由
路由独享守卫：只适用于特定路由
组件内守卫：在组件内部使用

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

router.beforeEach((to, from, next) => {
  // 在这里可以进行一些自定义操作，例如权限检查
  if (to.name === 'Admin' && !isAuthenticated) {
    next('/') // 跳转到登录页
  } else {
    next() // 继续导航
  }
})

动态路由：解锁灵活的导航

动态路由允许我们在运行时动态地生成路由规则。这在一些需要根据用户输入或服务器数据来决定路由的情况中非常有用。例如，我们可以根据用户选择的某个分类来动态生成该分类下的商品列表页面。

const routes = [
  {
    path: '/products/:categoryId',
    name: 'Products',
    component: Products,
    props: true
  }
]

在上面的配置中，我们定义了一个动态路由规则，其中 :categoryId 是一个动态参数。当用户访问 /products/1 或 /products/2 时，Vue Router 会将对应的分类 ID 传递给 Products 组件。

嵌套路由：构建应用层级结构

嵌套路由允许我们在一个路由组件内部定义其他子路由。这对于构建具有层级结构的应用程序非常有用，例如一个电商网站可以包含商品分类、商品详情、购物车等子页面。

const routes = [
  {
    path: '/products',
    name: 'Products',
    component: Products,
    children: [
      {
        path: ':productId',
        name: 'ProductDetails',
        component: ProductDetails
      },
      {
        path: 'cart',
        name: 'Cart',
        component: Cart
      }
    ]
  }
]

在上面的配置中，我们定义了一个名为 Products 的父路由，并在其内部定义了两个子路由：ProductDetails 和 Cart。当用户访问 /products/1 时，Vue Router 会加载 Products 组件，并在其内部加载 ProductDetails 组件。