Question

我有两个单文件组件，每个组件都有一个命名路由。 Setup.vue是一种基本形式，可以收集一些数据并将其转发到Timer.vue，而后者需要一些道具。有没有一种方法可以推到一条赋予道具的路线而无需将其作为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

是的，您可以做到，道具出现在下面的变量中：

this.$route.params

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

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

Answer 2

这可能有帮助-

this.$router.push({
  name: "timer",
  params: { fix: { type: 1, required: true } }
});

调用此代码发布表单提交。但是，如果有人刷新了计时器页面，则路由参数数据将消失，您将不得不以其他方式处理这种情况。如果可以从api中检索数据，则最好在计时器页面的已创建方法中进行api调用并在刷新时加载数据。

Answer 3

为了完整性，我将添加另一个选项。 Henrique的上述答案是实现我最初想要做的事情的一种简单得多的方法，该方法是在没有url级路由变量的情况下将prop路由并传递给组件。

使用商店作为vuex的一部分，我们可以将变量保存在全局可访问对象中，以后再在不同组件中进行访问。

store.js

export default new Vuex.Store({
  state: {
    development: null,
    inversion: null,
    stop: null,
    fix: null,
    wash: null
  }

Setup.vue

export default {
  data() {
    return {
      development: null,
      inversion: null,
      stop: null,
      fix: null,
      wash: null,
      store: this.$root.$store // local pointer to the global store, for conciseness
    }
  },
  methods: {
    startTimer() {
      // vuex uses a transactional history model, so we commit changes to it
      this.store.commit('development', this.development * 60)
      this.store.commit('inversion', this.inversion * 60)
      this.store.commit('stop', this.stop * 60)
      this.store.commit('fix', this.fix * 60)
      this.store.commit('wash', this.wash * 60)
      this.$router.push({
        name: 'timer'
      })
    },

Timer.vue

export default {
  name: 'timer',
  data() {
    return {
      state: this.$root.$store.state
    }
  },
  computed: {
    // map local to state
    development() {
      return this.state.development
    },
    stop() {
      return this.state.stop
    }
...

VueJS：如何在重定向时传递道具

3 个答案: