如何在redirectTo中引用查询参数？路由配置实现参数化重定向

你说得对，路由配置里的redirectTo确实没法直接把查询参数映射成路径参数，得换点思路来实现。我给你几个常用的解决方案，你可以根据自己的技术栈选择：

这是单页应用里最常用的方式，通过路由钩子手动解析查询参数再完成跳转。

比如在Vue Router中，你可以给/redirect路由添加beforeEnter钩子：

const routes = [
  {
    path: '/redirect',
    beforeEnter: (to, from, next) => {
      const { page, id } = to.query;
      // 先校验参数是否存在，避免跳转到无效路径
      if (page && id) {
        next(`/${page}/${id}`);
      } else {
        // 参数缺失时，可跳转到默认页或错误页
        next('/404');
      }
    }
  }
];

如果是React Router（v6+），可以用组件结合导航钩子实现：

import { useSearchParams, useNavigate } from 'react-router-dom';

function RedirectHandler() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  
  const page = searchParams.get('page');
  const id = searchParams.get('id');
  
  if (page && id) {
    navigate(`/${page}/${id}`);
  } else {
    navigate('/404');
  }
  
  return null;
}

// 路由配置
const routes = [
  { path: '/redirect', element: <RedirectHandler /> }
];

这种方式把跳转逻辑封装到组件里，更直观也便于维护。

比如Vue的重定向组件：

<template></template>

<script>
export default {
  mounted() {
    const { page, id } = this.$route.query;
    if (page && id) {
      this.$router.push(`/${page}/${id}`);
    } else {
      this.$router.push('/404');
    }
  }
};
</script>

然后路由配置指向这个组件：

const routes = [
  { path: '/redirect', component: RedirectComponent }
];

如果你的项目有后端服务（比如Express、Koa），也可以在后端直接处理重定向逻辑，适合服务端渲染（SSR）或需要后端控制跳转规则的场景：

// Express示例
app.get('/redirect', (req, res) => {
  const { page, id } = req.query;
  if (page && id) {
    res.redirect(`/${page}/${id}`);
  } else {
    res.redirect('/404');
  }
});

内容的提问来源于stack exchange，提问作者callmepills