js跳转页面如何汇总

使用JavaScript跳转页面的方法很多，包括window.location.href、window.location.assign、window.location.replace等。window.location.href是最常用的方法，因为它不仅能跳转页面，还能保存跳转前的页面历史记录。

一、window.location.href

window.location.href 是最常用的跳转页面方法。它不仅能跳转到指定的URL，还能保存跳转前的页面历史记录，方便用户通过浏览器的“返回”按钮返回之前的页面。

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

优点

保留历史记录：用户可以通过浏览器的“返回”按钮回到之前的页面。
简单易用：只需一行代码即可实现跳转。

缺点

刷新页面：每次跳转都会刷新整个页面，可能会增加加载时间。

二、window.location.assign

window.location.assign 与 window.location.href 类似，同样用于跳转页面，并且也会保留跳转前的页面历史记录。

window.location.assign("https://www.example.com");

区别

虽然 window.location.assign 和 window.location.href 功能相似，但 assign 方法可以通过调用返回值的 assign 方法重新加载页面，提供更灵活的控制。

三、window.location.replace

window.location.replace 用于跳转页面，但不会保留跳转前的页面历史记录。这意味着用户无法通过浏览器的“返回”按钮回到之前的页面。

window.location.replace("https://www.example.com");

优点

不保留历史记录：适用于敏感信息的页面跳转，确保用户无法通过返回按钮回到之前的页面。

缺点

无法返回：不适合需要用户返回上一页的场景。

四、window.open

window.open 用于在新窗口或新标签页中打开指定的URL。可以指定窗口的特性，如大小、位置等。

window.open("https://www.example.com", "_blank");

参数

URL：要跳转的页面地址。
name：窗口名称或目标，如 "_blank"（新窗口）、"_self"（当前窗口）等。
specs：窗口特性，如"width=500,height=600"等。

优点

新窗口打开：不影响当前页面，适用于需要同时浏览多个页面的场景。

缺点

被浏览器拦截：有些浏览器会拦截弹出窗口，影响用户体验。

五、window.history.pushState 和 window.history.replaceState

HTML5 提供了 window.history.pushState 和 window.history.replaceState 方法，用于在不刷新页面的情况下改变浏览器的URL。

window.history.pushState({page: "example"}, "Title", "/example");

使用场景

单页应用：适用于前端框架（如React、Vue等）开发的单页应用，实现无刷新页面跳转。
自定义历史记录：可以自定义浏览器的历史记录，增强用户体验。

六、使用JavaScript框架

现代前端框架（如React、Vue、Angular等）提供了更高级的路由管理功能，使页面跳转更方便、更高效。

React Router

React Router 是React生态中最常用的路由管理库。

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
<Router>
  <div>
    <Link to="/example">Go to Example</Link>
    <Switch>
      <Route path="/example">
        <ExampleComponent />
      </Route>
    </Switch>
  </div>
</Router>

Vue Router

Vue Router 是Vue.js官方提供的路由管理库。

import Vue from 'vue';
import Router from 'vue-router';
import ExampleComponent from './components/ExampleComponent.vue';
Vue.use(Router);
const router = new Router({
  routes: [
    {
      path: '/example',
      component: ExampleComponent
    }
  ]
});

Angular Router

Angular 提供了强大的路由模块，可以实现复杂的路由管理。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ExampleComponent } from './example/example.component';
const routes: Routes = [
  { path: 'example', component: ExampleComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

七、总结

JavaScript 提供了多种页面跳转的方法，每种方法都有其独特的优点和适用场景。在选择具体方法时，需要根据具体需求和应用场景进行权衡。

window.location.href 和 window.location.assign：适用于需要保留历史记录的页面跳转。
window.location.replace：适用于不需要保留历史记录的页面跳转。
window.open：适用于在新窗口或新标签页中打开页面的场景。
window.history.pushState 和 window.history.replaceState：适用于单页应用和无刷新页面跳转。
现代前端框架的路由管理：适用于React、Vue、Angular等框架开发的复杂应用。

选择合适的页面跳转方法，可以提升用户体验，提高应用的性能和可维护性。