创作者中心视频上传：路由设置怎么配才不卡顿

在实用百科指南后台做内容管理时，常有朋友反馈：点开创作者中心，选好视频上传，结果页面卡在‘正在处理’、进度条不动、甚至直接报错‘路由未匹配’——其实问题大概率出在前端路由配置上。

别急着重装插件，先看这三处

很多团队用 Vue Router 或 React Router 管理创作者中心的子页面，但默认路由写成 /creator/upload 后，没加 exact 或没处理嵌套路由，会导致上传组件加载失败。比如 Vue Router 里这样写就容易出问题：

routes: [
  { path: '/creator', component: CreatorLayout },
  { path: '/creator/upload', component: VideoUpload }
]

看起来没问题，但如果你的 CreatorLayout 是个带 <router-view> 的容器页，而没在内部显式声明 children，或者没设 redirect，上传页可能压根不渲染。

React Router v6 更要小心

v6 废掉了 exact，改用 * 和嵌套 Outlet。如果创作者中心是独立模块，建议把上传路由收敛到一个父路径下：

<Route path="creator" element={<CreatorLayout />}>
  <Route index element={<CreatorHome />} />
  <Route path="upload" element={<VideoUploadForm />} />
</Route>

漏掉 index 或把 path="upload" 写成 path="/creator/upload"（带前导斜杠），都会导致路由匹配失效，上传按钮点了没反应。

另外，视频上传常依赖 FormData 提交 + 后端直传 OSS，如果路由跳转用了 replace: true 或强制刷新，上传中的临时状态（如分片 ID、签名 token）就会丢失，看着像‘上传卡住’，其实是路由重置清掉了上下文。

真实场景：某知识付费后台踩过的坑

上周帮一个客户排查，他们创作者中心上传视频一直 500，查日志发现请求发到了 /api/v1/upload，但实际接口是 /api/v2/upload/video。一翻代码，原来是路由守卫里写了硬编码跳转：
if (to.path.includes('upload')) { next('/api/v1/upload') } —— 把前端路由和 API 路径混了，还顺手把请求劫持了。

解决办法很简单：删掉那行，改用 axios 实例统一配 baseURL，上传组件只管调 api.uploadVideo(file)，路由干干净净只负责页面展示。

说到底，创作者中心视频上传不是功能问题，而是路由和业务逻辑边界没划清。页面能打开、按钮能点、表单能填，不代表上传链路就通了；路由配对了，上传才能稳稳落进后端队列里。