javascript - VueJS : How to pass props while redirecting

Question

我有两个单文件组件，每个组件都有一个命名路由。 Setup.vue 是一种基本形式，它收集一些数据并将其转发到 Timer.vue，它需要一些 props。有没有办法推送到给它 props 的路由而不将它们作为 url 属性传递？

Setup.vue

<script>
export default {
    ...
  methods: {
    startTimer() {
      this.$router.push({
        name: 'timer',
        params: {
          development: this.development,
          inversion: this.inversion,
          stop: this.stop,
          fix: this.fix,
          wash: this.wash
        }
      })
    }
...
}
</script>

Timer.vue

<script>
export default {
  name: 'timer',
    ...
  props: {
    development: { type: Number, required: true },
    inversion: { type: Number, required: true },
    stop: { type: Number, required: true },
    fix: { type: Number, required: true },
    wash: { type: Number, required: true }
  }

router.js

    {
      // I want to avoid having to do this route, instead just /timer
      path: '/timer/:development/:inversion/:stop/:fix/:wash',
      name: 'timer',
      component: Timer,
      props: true
    }

Answer 1

是的，你可以做到，并且 props 位于下面的 var 中:

this.$route.params

但是每次重新加载页面时，不在 URL 中的参数都会丢失，因此这种情况仅适用于更改应用内的路由而不重新加载。

当我遇到类似的问题时，我使用查询变量而不是参数来解决问题，您可以使用这种方式或创建一个子路由树来组织您的 Prop 。