🍿 js中两种路由跳转的区别

在Web开发中，window.location.href和Vue Router（或其他现代前端路由库如React Router）是两种常见的页面跳转方式。它们各有特点，适用于不同的场景和需求。

1. window.location.href

window.location.href是一个直接操作浏览器地址栏的方法，可以直接改变当前页面的URL，从而实现页面跳转。这种方式类似于传统的服务器端重定向。例如：

window.location.href = 'https://www.example.com';

优点：

• 简单直接，适用于任何需要立即跳转的场景。
• 可以用于跨域的页面跳转，特别是在某些情况下需要绕过前端路由的限制时。

缺点：

• 页面会重新加载，用户体验不如单页面应用（SPA）中的路由跳转流畅。
• 不利于保持应用的状态，例如滚动位置、表单数据等。
• 不是前端路由的最佳实践，尤其是在使用现代前端框架如Vue或React时。

2. Vue Router（或其他前端路由库）

使用Vue Router进行页面跳转不仅可以保持应用的单页面特性，还可以利用其提供的各种功能，如导航守卫、动态路由匹配等。例如：

// 使用Vue Router的编程式导航this.$router.push('/new-path');

或者使用命名路由：

this.$router.push({ name: 'user', params: { userId: 123 }});

优点：

• 保持了页面的状态，不会导致页面的重新加载。
• 提供了丰富的导航功能，如路由守卫、动态路由等。
• 用户体验更流畅，符合现代Web应用的需求。

缺点：

• 需要额外的配置和集成工作，尤其是在初始化阶段。
• 不适用于需要立即跳转到外部链接的场景。

总结

• 如果你的目标是实现一个单页面应用（SPA），并希望用户体验流畅且不重新加载页面，推荐使用Vue Router或其他前端路由库进行页面跳转。
• 如果你的应用需要在不重新加载页面的情况下跳转到外部链接，或者需要绕过前端路由的限制（如某些特定情况下的跨域问题），可以使用window.location.href。但在大多数现代Web应用中，推荐使用前端路由库来处理内部导航。