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

在 Vue 应用中，路由跳转通常使用 Vue Router 的 this.$router.push 或 <router-link>，而直接使用 location.href 是传统的原生 JavaScript 方式。它们的主要区别如下：

---

1. Vue Router 的跳转

实现方式

• 使用 this.$router.push 或 <router-link> 进行跳转。
• 示例：

  // 编程式导航
  this.$router.push('/about');
  
  // 声明式导航
  <router-link to="/about">关于我们</router-link>

特点

1. 单页应用（SPA）：
   • Vue Router 的跳转不会刷新页面，而是通过动态替换组件来实现页面切换。
   • 页面 URL 变化，但整个应用不会重新加载。
2. 路由历史管理：
   • Vue Router 使用 HTML5 History API 或 Hash 模式来管理路由历史。
   • 支持前进、后退等浏览器历史操作。
3. 性能优化：
   • 只加载必要的组件，减少页面刷新带来的性能开销。
4. 路由钩子：
   • 支持全局导航守卫（如 beforeEach）和组件内导航守卫（如 beforeRouteEnter），可以在跳转前后执行逻辑。
5. 动态路由：
   • 支持动态路由参数和嵌套路由，适合复杂应用。

---

2. location.href 的跳转

实现方式

• 直接修改 location.href 或调用 location.assign、location.replace。
• 示例：

  location.href = '/about'; // 跳转到新页面
  location.replace('/about'); // 替换当前页面（不保留历史记录）

特点

1. 页面刷新：
   • location.href 的跳转会触发页面刷新，导致整个应用重新加载。
   • 不适合单页应用（SPA），因为会破坏 SPA 的无刷新特性。
2. 无路由管理：
   • 无法利用 Vue Router 的路由历史管理功能。
   • 前进、后退等浏览器历史操作会重新加载页面。
3. 性能开销：
   • 页面刷新会导致所有资源重新加载，增加性能开销。
4. 无路由钩子：
   • 无法使用 Vue Router 的导航守卫，跳转前后无法执行自定义逻辑。
5. 简单直接：
   • 适合传统的多页应用（MPA），或者需要完全刷新页面的场景。

---

3. 区别对比

特性	Vue Router 跳转	location.href 跳转
页面刷新	无刷新，动态替换组件	页面刷新，重新加载
适用场景	单页应用（SPA）	多页应用（MPA）或需要刷新的场景
路由历史管理	支持（History API 或 Hash 模式）	不支持
性能	高性能，只加载必要组件	低性能，页面完全刷新
路由钩子	支持导航守卫	不支持
动态路由	支持动态参数和嵌套路由	不支持
使用方式	this.$router.push 或 <router-link>	location.href 或 location.replace

---

4. 使用场景

Vue Router 跳转

• 单页应用（SPA）。
• 需要无刷新页面切换的场景。
• 需要路由历史管理、导航守卫等高级功能。

location.href 跳转

• 多页应用（MPA）。
• 需要完全刷新页面的场景。
• 跳转到外部链接或非 Vue 应用。

---

5. 示例对比

Vue Router 跳转

// 编程式导航
this.$router.push('/about');

// 声明式导航
<router-link to="/about">关于我们</router-link>

location.href 跳转

// 跳转到新页面
location.href = '/about';

// 替换当前页面（不保留历史记录）
location.replace('/about');

---

6. 总结

• Vue Router 跳转：适合单页应用（SPA），支持无刷新页面切换、路由历史管理、导航守卫等功能，性能更优。
• location.href 跳转：适合多页应用（MPA）或需要完全刷新页面的场景，简单直接但性能较低。

在 Vue 项目中，优先使用 Vue Router 进行跳转，以充分利用 SPA 的优势和 Vue Router 提供的功能。只有在特殊场景（如跳转到外部链接）时，才使用 location.href。