Vue 官方的路由管理工具 https://router.vuejs.org/zh/

1. https://github.com/GZhonghui/WebTools
2. https://github.com/GZhonghui/Web101/tree/master/10_vue_router/try-router
3. https://github.com/GZhonghui/djwcb/tree/master/vue-project-2025

# 安装，或者在创建工程的时候选择使用 VueRouter
# vue3 好像对应 vue-router@4？
npm install vue-router@4

主要步骤：

1. createRouter（在这里配置路由和组件的对应关系），然后应用到 App 上
2. 在组件中使用RouterLink和RouterView
3. 最重要的是，要理解RouterView渲染的是谁 参考

xxx.com/a/b/c?q1=1&q2=2

获取q1,q2的值，参考这里：https://github.com/GZhonghui/djwcb/tree/master/vue-project-2025

参考这里：https://github.com/GZhonghui/djwcb/tree/master/vue-project-2025

1. Histroy Mode（推荐）: xxx.com/a/b/c
2. Hash Mode（简单）: xxx.com/#/a/b/c（注意#后面的内容已经不是path了，是锚点）

Hash Mode不需要特地配置
Histroy Mode可能会遇到这样的问题：
AI：
使用 Vue.js、React 等前端框架开发的 单页面应用（SPA），在用户直接访问某个具体路径（如 www.x.com/settings/a/b/c）时，确实需要额外处理，特别是在生产部署阶段，否则会出现 404 Not Found 的问题
原因是SPA 的特点：

1. 所有页面都依赖一个 HTML 文件（比如 index.html）。
2. 前端路由（如 Vue Router）控制页面的切换，而不是后端服务。
3. 当你直接访问 www.x.com/settings/a/b/c 时，浏览器会发请求给服务器，期望服务器返回一个资源，但实际上服务器上并没有这个静态文件路径，结果返回 404。

解决方式：为web服务器配置“路径重写”规则，把所有路径请求都指向 index.html
Nginx的解决方式：

location / {
  try_files $uri $uri/ /index.html;
}

Apache 2的解决方式：TODO
PS：这个问题是前端部署的问题，和后端（API）无关