VueJS中使用vue-router重定向时如何从URL传递props参数？

数据老陈

2026-10-2

问题原因

你当前的写法有两处核心错误导致路由匹配失败跳转主页：

name 属性需要传入路由配置表中提前定义的路由命名，而非路由路径字符串，匹配不到对应路由就会触发 fallback 逻辑跳主页
要实现 params 自动转为组件 props，需要提前在路由配置中开启 props: true 配置

解决步骤

方案1：name + params 传参（参数不会暴露在地址栏）

首先修改路由配置，给目标路由增加命名、开启 props 支持

// router/index.js 路由表配置
{
  path: '/:locale/my-cart', // 路径中的动态参数用:占位
  name: 'MyCart', // 自定义路由命名，后续跳转要和这个值一致
  component: () => import('@/pages/MyCart.vue'),
  props: true // 开启后路由params会自动作为props传递给组件
}

修改重定向跳转代码

setTimeout(() => {
  clearInterval(intervalId)
  this.$router.push({ 
    name: 'MyCart', // 这里填路由配置里的name值，不是路径
    params: {
      locale: this.$store.state.locale, // 对应路径里的:locale动态参数
      step: '2' // 自定义传参
    }
  })
}, 4000)

在目标组件中声明接收props

// MyCart.vue
export default {
  props: {
    step: {
      type: String,
      default: '1'
    },
    locale: {
      type: String,
      required: true
    }
  }
}

方案2：path + query 传参（参数暴露在地址栏，刷新不丢失）

如果不需要隐藏参数可以用这个方案，不需要提前定义路由name：

路由配置增加props转换逻辑

{
  path: '/:locale/my-cart',
  component: () => import('@/pages/MyCart.vue'),
  // 把query和params参数统一转为组件props
  props: route => ({ step: route.query.step, locale: route.params.locale })
}

修改重定向跳转代码

setTimeout(() => {
  clearInterval(intervalId)
  this.$router.push({ 
    path: `/${this.$store.state.locale}/my-cart`,
    query: { step: '2' }
  })
}, 4000)