[Vuejs]-VueJS: How to pass props while redirecting

by

2👍

✅

Yes, you can do it and the props came in the var below:

this.$route.params

But every time you reload the page the params that are not in the URL will be lost, so this case just work when changing the route inside the app without reload.

When I have a similar problem I use query variables instead of params to solved the problem, you can use this way or make a child routes tree to organize your props.

👤Henrique Oliveira

1👍

This may help –

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

Invoke this code post form submission. However, if someone refreshes the timer page, the route params data will be gone and you will have to handle this scenario with some other way. If the data can be retrieved from an api, it will be better if you make an api call in created method of timer page and load the data in case of refresh.

👤Krantisinh

0👍

I’ll add another option for the sake of completeness. Henrique’s answer above is a much simpler way to achieve what I initially wanted to do, which is to route and pass props to the component without url level route variables.

Using the store as part of vuex, we could save variables in a globally accessible object and access them later in different components.

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

Leave a comment