面试题：Vue Router 的跳转和 location.href 有什么区别？

Vue Router 的编程式导航（如 router.push）和原生的 location.href 都能实现页面跳转，但它们在工作原理、用户体验和应用状态上有本质区别。

核心区别

特性	Vue Router (router.push)	location.href
页面刷新	不会刷新整个页面 (SPA 核心)	会刷新整个页面
DOM 操作	局部更新，只改变视图组件	重新加载整个 HTML 文档
用户体验	流畅，无白屏，类似原生 App	卡顿，有白屏或加载过程
浏览器历史	可以通过 router.go() 等方法精细控制	只能使用 history.go() 等原生方法
适用场景	单页应用 (SPA) 内部导航	跳转到外部链接或强制刷新当前页

---

详细解释

1. 是否刷新页面

• Vue Router (this.$router.push('/home'))：
  • 这是单页应用 (SPA) 的核心机制。
  • 它通过监听 URL 的变化（使用 history.pushState 或 hashchange），动态地替换 <router-view> 内部的组件，而不重新加载整个页面。
  • 这意味着页面的其他部分（如侧边栏、头部导航、已加载的 JavaScript/CSS）保持不变，只有内容区域被更新。
• location.href = '/home'：
  • 这是一个原生的、强制的页面跳转。
  • 浏览器会向服务器请求新的 URL，完全丢弃当前页面，重新下载 HTML、CSS、JavaScript 等所有资源，然后重新渲染整个页面。
  • 这会导致明显的“刷新”感，用户会看到白屏或加载动画。

2. 用户体验

• Vue Router：提供流畅、快速的导航体验，接近原生应用。没有页面闪烁，状态（如滚动位置、表单输入）可以更好地被管理。
• location.href：体验较差，有明显的加载延迟和白屏，打断了用户的操作流。

3. 对应用状态的影响

• Vue Router：
  • Vue 应用的根实例和所有全局状态（如 Vuex store）保持不变。
  • 组件的生命周期钩子（如 beforeRouteLeave）会被调用，允许你进行数据保存或导航守卫。
  • 可以利用路由守卫 (beforeEach, beforeRouteUpdate 等) 进行权限验证、数据预取等操作。
• location.href：
  • 当前的 Vue 应用实例被完全销毁。
  • 所有内存中的状态（包括 Vuex 数据、组件实例、未保存的表单数据）都会丢失。
  • 无法执行任何 Vue 的导航守卫或生命周期钩子。

4. 浏览器历史记录

• Vue Router：使用 history.pushState 操作，可以无刷新地添加历史记录。提供了 router.go(), router.back(), router.forward() 等方法来编程式地控制历史栈。
• location.href：同样会添加历史记录，但只能通过原生的 history.go(-1) 等方法控制。

何时使用？

• 使用 Vue Router (router.push)：
  • 在你的单页应用内部进行导航时（如从 /home 跳转到 /about）。
  • 你想保持 SPA 的流畅体验和应用状态时。
  • 需要利用路由守卫进行权限控制或数据预加载时。
• 使用 location.href：
  • 跳转到外部网站（如 location.href = 'https://example.com'）。
  • 需要强制刷新当前页面（如 location.href = location.href）。
  • 在非 SPA 环境或 Vue Router 未正确初始化时进行跳转。

总结

简单来说：

• router.push 是“外科手术”：精准地只改变你需要改变的部分（组件），速度快，体验好。
• location.href 是“重新建房”：拆掉旧房子，按新地址重建一栋，耗时长，体验差。

在 Vue SPA 开发中，应优先使用 Vue Router 的编程式导航来实现内部跳转，以保持应用的单页特性和良好用户体验。只有在需要跳转到外部链接或强制刷新时才使用 location.href。