Vue 路由管理

简介

传统的 Web 应用程序通常是多个页面之间进行跳转，每次跳转都会加载一个新的页面，这样会导致页面的整体刷新，用户体验相对较差。

而 Vue 提倡单页面应用（SPA）的开发方式。在单页面应用中，所有的内容都在一个页面内动态加载，通过前端路由（例如 Vue Router）控制不同页面的展示，从而实现页面间的切换。

前端路由也提供了更灵活的控制方式，使得开发者可以实现更复杂的页面交互和导航逻辑。

单页面应用

单页面应用（SPA）是一种网络应用程序的模型，通过动态重写当前页面来与用户交互，避免了传统的重新加载整个页面的方式，从而也避免了用户操作被页面切换所中断的弊端。

使用单页面应用的优点是：

用户体验好：由于在页面切换时不需要重新加载整个页面，因此用户感知到的加载时间较短，页面切换也更加平滑。
前后端分离：SPA 将前端的展示逻辑和后端的业务逻辑分离开来，使得前端开发和后端开发能够相对独立地进行。
代码复用性高：由于 SPA 只有一个 HTML 页面，前端路由控制着页面的切换，因此可以更好地复用代码和组件。

路由

路由是指确定如何处理来自用户或软件的请求的方式。在 Web 开发中，它通常用于定义如何响应特定 URL 请求，将其映射到相应的页面或资源。

同时，特定的 URL 也可以用来实现单页面应用，通过在单个页面切换不同的路由达到跳转不同页面的效果。

在项目中可能存在多个页面，因此，Vue 提供了 Vue Router 来实现了路由控制。

Vue-Router

Vue-Router 是 Vue 官方提供的强大的路由管理器，与 Vue 无缝结合，轻松实现单页应用程序（SPA）开发。

Vue-Router具有以下特性：

支持 H5 历史模式和 hash 模式，灵活适应不同路由实现方式。
支持嵌套路由，使页面组织更加灵活清晰。
提供了丰富的路由参数功能，使页面间传递数据更为便捷。
支持编程式路由，方便在代码中进行页面跳转操作。
允许为路由取名，提升代码可读性和维护性。

除了这些基本特性，Vue Router 还提供了更多高级用法，详情请参阅官方文档。

Vue Router 安装

在项目根目录下，使用 npm install vue-router@4

通过 npm list 可以查看当前已经安装了 vue-router@xxx

Vue 路由的模式

在单页面应用中，通常有两种路由模式可以选择：hash 模式和 history 模式。

hash 模式：用于管理单页面的路由，指在加载初始页面后，应用程序在运行时动态地更新页面内容，而不需要每次页面切换时重新加载整个页面。
- 例如：http://expample.com/#/about
history 模式：使用浏览器的历史记录 API 来管理路由，不再依赖于 hash 来标识路由。
- 例如：http://example.com/about

这两种模式是通过 Vue 提供的工厂函数来实现：

createWebHashHistory：用于创建一个基于 hash 模式的路由历史管理器。
createWebHistory：用于创建一个基于 history 模式的路由历史管理器。

这两种模式的区别：

hash 模式的优点是不会被发送到服务器，完全由浏览器处理，易于搭建单页应用，但是在 URL 中会包含一个看似多余的 # 符号。
histroy不依赖于 hash 表示路由，使得 URL 看起来更加干净。

为了快速搭建单页面应用，本章节默认使用 hash 模式，后续如果需要优化 URL 链接，可切换为 history 模式。

路由定义

Vue Router 提供的了一个工厂函数 createRouter 用于创建一个路由实例。

它接收一个配置对象作为参数，配置对象包含了路由的设置，例如定义的路由规则和路由的模式等。示例如下所示：

// 导入两个函数
import {createRouter,createWebHashHistory} from 'vue-router'
import 组件 from 'xxx.vue'
const router = createRouter({
  // 配置 hash 模式的路由历史管理器
    history:createWebHashHistory(),
  // 定义路由规则，所有的路由都在此处配置
    routes:[
      {
        path: "/路径",
        component: 组件
    }
    ]
})
// 导出创建好的路由示例`router`
export default router

创建好了路由示例，就可以在 Vue 应用中进行使用，从而实现路由控制、页面切换等功能。

路由使用

当定义好了路由后，为了成功地展示对应路径的页面，需要使用 Vue Router 提供的两个重要组件：

router-view：是 Vue Router 提供的一个重要标签，它在应用中充当一个占位符，负责渲染匹配的路由所对应的组件。可以在模板中指定这个组件的位置，让 Vue Router 自动根据当前路径来决定渲染哪个组件。
<router-link>：这是一个用于导航的组件，它会在用户点击时根据配置的路由规则，动态地更新 URL，同时在不重新加载页面的情况下切换路由。它方便了用户在单页应用中进行页面间的跳转。

路由配置示例

以上简单介绍了安装以及单页面和路由模式的概念，下面尝试新建一个页面，来体会路由的基础用法和效果。

在 src 的 components 文件夹下新建页面，并以 .vue 后缀结尾。
在 src 目录下新建 router 文件夹，并新建 index.js 文件。

代码示例如下：

Ceshiren.vue 文件

<template>
    <div>
        Ceshiren
    </div>
</template>

Hogwarts.vue 文件

<template>
    <div>
        Hogwarts
    </div>
</template>

index.js 文件

import {createRouter,createWebHashHistory} from 'vue-router'
import Ceshiren from '../views/Ceshiren.vue'
import Hogwarts from '../views/Hogwarts.vue'

const routes=[
    {
        path:"/ceshiren",
        component:Ceshiren
    },
    {
        path:'/hogwarts',
        component:Hogwarts
    }
]

const router = createRouter({
    // 路由模式
    history:createWebHashHistory(),
    routes,// `routes:routes` 的缩写
})
export default router

main.js 文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
//注册路由
createApp(App).use(router).mount("#app")

App.vue 文件

<template>
  ...
  <div>
    <p><router-link to="/ceshiren">点击进入 Ceshiren 页面</router-link></p>
    <p><router-link to="/hogwarts">点击进入 Hogwarts 页面</router-link></p>
    <router-view></router-view>
  </div>
</template>

访问 http://127.0.0.1:5173/#/ 并点击进入 Ceshiren 页面，效果如下所示，页面展示出了 Ceshiren 的字样，证明路由配置成功。

总结

本节介绍了配置并使用 Vue-router 实现单页面应用，使得根据路由配置在不同路径下加载不同的组件，实现页面间的导航和切换，从而提示用户的交互体验。