在 Vue 应用中，使用 Vue Router 进行页面跳转与直接使用 location.href 有何不同？请从路由模式、历史记录、组件状态、异步组件加载、安全性和 SEO 等方面阐述。
考察说明
考查对 Vue Router 与原生跳转机制差异的理解，以及在实际项目中选择合适方案的意识。
回答思路
- 【回答框架 1】路由模式差异：Vue Router 默认使用 hash 模式或 history 模式，基于浏览器 history API 实现前端路由，不会导致页面刷新；而 location.href 赋值会触发完整的页面导航，刷新整个文档。
- 【回答框架 2】组件状态保留：使用 Vue Router 跳转时，Vue 应用实例和组件状态通常得以保留（除非路由配置了刷新），而 location.href 会卸载当前应用，重新加载新页面，导致状态丢失。
- 【回答框架 3】异步组件加载：Vue Router 支持路由懒加载，在导航时按需加载对应组件，提升性能；location.href 加载的是服务器返回的新页面，无法衔接现有的 SPA 资源。
- 【回答框架 4】安全与处理：location.href 容易被第三方注入 XSS，而 Vue Router 的跳转经过内部处理，相对更安全。此外，Vue Router 支持导航守卫，可在跳转前进行逻辑判断，location.href 无法直接实现。
- 【回答框架 5】SEO：history 模式下 Vue Router 可配合 SSR 或预渲染提升 SEO；location.href 跳转的页面是独立 URL，对 SEO 友好，但无法利用 SPA 的客户端渲染优势。
- 【关键点 1】Vue Router 基于 history API，实现无刷新跳转，组件状态保留。
- 【关键点 2】location.href 导致整页刷新，破坏 SPA 体验。
- 【关键点 3】Vue Router 支持路由守卫和懒加载，location.href 不具备。
- 【关键点 4】在 Vue 应用中优先使用 Vue Router，除非需要强制刷新。
- 【易错点 1】错误认为 Vue Router 的 history 模式与普通跳转完全等价。
- 【易错点 2】忽略 location.href 可能引发的 XSS 风险。
- 【易错点 3】在需要守卫逻辑时仍使用 location.href，绕过导航守卫。