this.$router.push传递props异常：theme始终为undefined如何解决？

你的问题出在**props: true的配置位置不对**——你把它写在了$router.push的参数里，但这个配置应该放在路由的定义中，而不是跳转的时候。

第一步：修正路由配置 #

打开你的路由配置文件（通常是router/index.js），找到settings路由的定义，加上props: true：

const routes = [
  // ... 其他路由项
  {
    name: 'settings',
    path: '/settings',
    component: () => import('@/views/Settings.vue'), // 替换成你的组件实际路径
    props: true // 这才是正确的配置位置！
  }
]

第二步：简化跳转代码 #

现在你可以去掉push里的props: true了，跳转代码保持这样即可：

this.$router.push({
  name: 'settings',
  params: {
    theme: 'dark'
  }
})

第三步：组件里正常接收props #

你的组件代码其实没问题，不过可以直接用this.theme代替this.$props.theme，写法更简洁：

export default {
  name: 'settings',
  props: ['theme'],
  mounted() {
    console.log("on mount: " + this.theme) // 直接访问props即可
    console.log(this.$route.params.theme) // 也能拿到，但用props更符合组件设计原则
  }
}

额外注意：刷新页面丢失参数的问题 #

如果你的路由path没有定义动态段（比如/settings/:theme），通过params传递的参数不会出现在URL里，用户刷新页面后参数就会丢失。如果需要参数持久化，可以二选一：

• 改用query传参：

  // 跳转代码
  this.$router.push({
    name: 'settings',
    query: {
      theme: 'dark'
    }
  })
  // 路由配置要改成函数式props来接收query
  {
    name: 'settings',
    path: '/settings',
    component: Settings,
    props: route => ({ theme: route.query.theme })
  }
  

• 把路由改成动态路径：

  // 路由配置
  {
    name: 'settings',
    path: '/settings/:theme', // 加上动态参数段
    component: Settings,
    props: true
  }
  // 跳转代码可以不变，或者用路径跳转：this.$router.push(`/settings/dark`)
  

这样修改后，你就能正常拿到theme的值了。

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