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

【问题标题】：VueJS: How to pass props while redirectingVueJS：如何在重定向时传递道具
【发布时间】：2019-09-12 23:24:45
【问题描述】：

我有两个单文件组件，每个组件都有一个命名路由。 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
    }

【问题讨论】：

简单。将其保存在某处并加载它。
@appleapple 喜欢 localStorage 什么的？有没有“vue”的方式来做到这一点？
或者像全局对象一样简单。 vue的方式大概是vuex，不过个人不太喜欢

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

是的，你可以做到，道具在下面的 var 中：

this.$route.params

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

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

【讨论】：

【解决方案2】：

这可能会有所帮助 -

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

调用此代码发布表单提交。但是，如果有人刷新计时器页面，路由参数数据将消失，您将不得不以其他方式处理这种情况。如果可以从api中获取数据，最好在timer page的created方法中调用api，在刷新时加载数据。

【讨论】：

【解决方案3】：

为了完整起见，我将添加另一个选项。上面 Henrique 的回答是实现我最初想要做的事情的一种更简单的方法，即在没有 url 级别路由变量的情况下将 props 路由和传递给组件。

使用 store 作为 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
    }
...

【讨论】：