微擎微网站开发网络科技公司网站源码
1、对路由的理解
（1）路由（route）是一组key-value的对应关系。这种对应关系把 URL 路径和特定的组件、函数或者页面联系起来，其核心作用是依据不同的 URL 路径，将用户请求导向对应的处理逻辑。
（2）多个路由需要用路由器（router）来管理。
（3）路由是构建SPA应用（单页面应用）的核心技术。
2、路由器工作模式
Vue Router 的工作模式指的是路由系统处理 URL 和历史记录的方式，主要分为 hash 模式、history 模式 和 abstract 模式。
（1）Hash 模式（默认）
特点：
- URL 中使用
#符号（如http://example.com/#/home），#后的内容为路由路径。 - 浏览器不会将 hash 部分发送到服务器，所有跳转由前端处理。
- 改变 hash 不会触发页面刷新，只会触发
hashchange事件。
const router = createRouter({history: createWebHashHistory(), // 使用 hash 模式routes: [...]
});优缺点：
- 优点：兼容性极强（支持 IE9+），无需后端配置。
- 缺点：URL 不美观，带有
#符号；部分场景下（如微信分享）可能有问题。
(2)History 模式（推荐）
特点：
- 使用 HTML5 的
pushState和replaceStateAPI 实现路由切换。 - URL 更美观（如
http://example.com/home），无#符号。 - 需要后端配合：当用户直接访问或刷新页面时，服务器需返回应用的入口文件（如
index.html），否则会出现 404 错误。
const router = createRouter({history: createWebHistory(), // 使用 history 模式routes: [...]
});优缺点：
- 优点：URL 更符合直觉，适合需要 SEO 的场景（如内容型网站）。
- 缺点：需要后端配合，否则刷新页面会 404；兼容性稍差（IE10+）。
拓展：
开发环境与生产环境路径不一致
- 开发环境：通常运行在
http://localhost:5173/（根路径）。 - 生产环境：可能部署在
https://example.com/my-app/（子路径）。
使用 import.meta.env.BASE_URL 可以让路由配置自动适应不同环境，避免硬编码路径
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]
});export default router; (3)Abstract 模式
特点：
- 不依赖浏览器历史 API，路由状态保存在内存中。
- 适用于非浏览器环境（如 Node.js、Weex、SSR 等）。
- 若在浏览器中使用，行为类似 hash 模式，但无
#符号。
const router = createRouter({history: createMemoryHistory(), // 使用 abstract 模式routes: [...]
});3、路由栈--push --replace
路由栈（history stack）是用来管理应用导航历史的机制。支持浏览器的前进、后退功能
常用方法：push,replace
| 特性 | push | replace |
|---|---|---|
| 是否新增记录 | 是（添加到栈顶） | 否（替换栈顶的当前路由） |
| 历史记录 | 保留，可后退到上一个路由 | 不保留，无法后退到被替换的路由 |
| 浏览器 URL | 会生成新的历史记录（可在地址栏看到） | 不会生成新记录（地址栏直接更新） |
| 典型场景 | 普通页面跳转（如列表→详情页） | 登录 / 登出、避免重复路由记录 |
push应用场景：普通页面跳转
// 从主页跳转到关于页，允许用户后退回到主页
router.push('/about'); replace应用场景：登录成功跳转
const handleLogin = async () => {await loginAPI();// 登录成功后，用主页替换登录页，避免用户点击后退回到登录页router.replace('/home');
};4、RouterLink和RouterView组件
（1）RouterLink:
本质是一个<a>标签，用于导航
在 Vue Router 的 <RouterLink> 组件中，确实存在一个 replace 属性，用于控制导航行为。这与编程式导航中的 replace 方法功能类似，但使用方式不同。以下是详细解释：
- 当
<RouterLink>设置replace属性时，点击链接会调用router.replace()而非router.push()，即替换当前路由记录，不保留历史。
（2）RouterView:
内容区，用于给路由组件占位，当页面路由变成路由组件的路由时，路由组件挂载，当页面路由不再是该路由组件对应的路由，路由组件会卸载
5、路由的写法
嵌套路由
query参数
params参数
props配置
6、编程式路由导航
编程式路由导航是指通过代码逻辑而非声明式组件（如 Vue 的 <RouterLink>）来控制路由跳转的方式。它允许开发者在满足特定条件时（如登录验证成功、表单提交后）动态触发路由变化。
需要用到push和replace方法
| 特性 | 编程式导航 | 声明式导航（如 <RouterLink>） |
|---|---|---|
| 触发方式 | 通过 JavaScript 代码调用 | 通过 HTML 标签点击触发 |
| 灵活性 | 高（支持条件判断、异步操作） | 低（仅支持静态配置） |
| 适用场景 | 登录验证、表单提交、权限控制 | 导航菜单、固定链接 |
| 代码位置 | 组件方法、生命周期钩子 | 模板（HTML 部分） |
7、路由的重定向
redirect
