路由

vite-plugin-ssr 中，我们可以选择：

服务端路由，客户端路由
文件系统路由，路由字符串和路由函数

服务端路由或客户端路由

vite-plugin-ssr 对服务端路由（页面导航时 HTML 重新加载）和客户端路由（页面导航时 DOM 改变）都有一流的支持

路由 > 服务端路由 VS 客户端路由帮助我们选择使用哪种路由

React Router / Vue Router

我们建议使用 vite-plugin-ssr 内置的路由，而非 React Router 或 Vue Router

不过 vite-plugin-ssr 也支持 React Router 和 Vue Router，请参阅路由 > Vue Router & React Router

路由字符串 & 路由函数

默认情况下，vite-plugin-ssr 执行文件系统路由：

FILESYSTEM                        URL
pages/index.page.js               /
pages/about.page.js               /about
pages/faq/index.page.js           /faq
pages/movie/@id/index.page.js     /movie/1, /movie/2, /movie/3, ...

我们也可以定义 “路由字符串” 和 “路由函数”

// /pages/product.page.route.js

// 这个文件定义了 `/pages/product.page.js` 的路由

// 路由字符串
export default "/product/@productId";

参数 productId 传递到了 pageContext.routeParams.productId

路由函数为我们提供了完整且灵活的编程能力，来实现高级路由逻辑，例如路由守卫：

// /pages/product/edit.page.route.js

// 这个文件定义了 `/pages/product/edit.page.js` 的路由

import { resolveRoute } from "vite-plugin-ssr/routing";

export default async (pageContext) => {
  // 确保 `/product/@id/edit` 路由只能被管理员访问
  if (!pageContext.user.isAdmin) {
    return false;
  }

  // 我们可以使用 `vite-plugin-ssr` 的路由字符串解析器
  return resolveRoute("/product/@id/edit", pageContext.urlPathname);
};

另请参阅:

✍ Edit this page