navigate()

环境：Browser、 Client Routing

我们可以使用 navigate('/some/url') 以编程方式切换页面。

⚠ navigate() is only available if you use navigate() 仅在你使用客户端路由 时可用。如果你使用服务端路由 ，则使用 window.location.href = '/some/url' 即可

当导航不是由用户点击锚点 <a> 触发时，navigate() 很有用。 例如，在成功提交表单后重定向用户时

import { navigate } from 'vite-plugin-ssr/client/router'

// 一些深度嵌套的视图组件
function Form() {
  return <form onSubmit={onSubmit}>...</form>
}

async function onSubmit() {
  /* ...  */

  const navigationPromise = navigate('/form/success')

  console.log("The URL changed but the new page hasn't rendered yet.")
  await navigationPromise
  console.log('The new page has finished rendering.')
}

如果你想在页面加载时重定向你的用户，请参阅 页面重定向 指南。

选项：

  • navigate('/some-url', { keepScrollPosition: true })：不要滚动到页面顶部； 将滚动位置保持在原处。（对于 嵌套布局 很有用。）（我们也可以使用<a href="/some-url" keep-scroll-position />。）
  • navigate('/some-url', { overwriteLastHistoryEntry: true })：不要在浏览器的历史记录中创建新条目，而是让新 URL 替换当前 URL。 （这有效地从浏览器历史记录中删除了当前 URL）。

Vue example:

React example: