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

我有两个单文件组件，每个组件都有一个命名路由

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>

<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 }
  }

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'
      })
    },

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
    }
...

---

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

this.$route.params

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

---

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

是的，您可以这样做，并且道具出现在下面的变量中：

this.$route.params

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

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

这可能会有所帮助-

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

调用此代码发布表单提交。但是，如果有人刷新计时器页面，route params数据将消失，您必须以其他方式处理此情况。如果可以从api中检索数据，最好在计时器页面的created method中调用api，并在刷新时加载数据。

这可能会有所帮助-

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

---

调用此代码发布表单提交。但是，如果有人刷新计时器页面，route params数据将消失，您必须以其他方式处理此情况。如果可以从api中检索数据，那么最好在计时器页面的created method中调用api，并在刷新时加载数据。

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

使用存储作为vuex的一部分，我们可以将变量保存在全局可访问的对象中，然后在不同的组件中访问它们

store.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
    }

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

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>

<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 }
  }

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'
      })
    },

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
    }
...

定时器.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>

<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 }
  }

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'
      })
    },

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
    }
...

---

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

使用存储作为vuex的一部分，我们可以将变量保存在全局可访问的对象中，然后在不同的组件中访问它们

store.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
    }

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

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>

<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 }
  }

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'
      })
    },

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
    }
...

定时器.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>

<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 }
  }

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'
      })
    },

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
    }
...

---

简单。将其保存到某个位置并加载。@appleapple比如localStorage或其他什么？有没有一种“vue”方法可以做到这一点？或者像全局对象一样简单。vue的方式可能是vuex，我个人不喜欢这种简单的方式。将其保存到某个位置并加载。@appleapple比如localStorage或其他什么？有没有一种“vue”方法可以做到这一点？或者像全局对象一样简单。vue方式可能是vuex，但我个人不喜欢它