Passing props in VueJS is a common task, especially while redirecting to another

Question

Passing props in VueJS is a common task, especially while redirecting to another

I am working with two separate single-file components, each equipped with its own named route. In the Setup.vue component, there is a basic form that gathers and sends data to the Timer.vue component which expects certain props. Is there a way to navigate to a specific route in Vue.js while passing props without including them as URL parameters?

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
    }

javascript vue.js vuejs2 vue-component vue-router

Answer 1

Answer №1

Absolutely, you have the ability to accomplish this task and retrieve the props in the variable shown below:

this.$route.params

However, it's important to note that whenever you refresh the page, any params not present in the URL will be lost. Therefore, this method is most effective when navigating between routes within the application without triggering a full reload.

In similar situations, I tend to utilize query variables instead of params to address the issue. You can opt for this approach or create a child routes tree to better organize your props.

Answer 2

Absolutely, you have the ability to accomplish this task and retrieve the props in the variable shown below:

this.$route.params

However, it's important to note that whenever you refresh the page, any params not present in the URL will be lost. Therefore, this method is most effective when navigating between routes within the application without triggering a full reload.

In similar situations, I tend to utilize query variables instead of params to address the issue. You can opt for this approach or create a child routes tree to better organize your props.

Answer 3

Answer №2

Consider the following suggestion -

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

Execute this code after submitting a form. Keep in mind that if a user refreshes the timer page, the route parameters will be lost and you will need to find an alternative solution. If the data can be obtained from an API, it is recommended to make an API call in the created method of the timer page to load the data in case of a page refresh.

Answer 4

Consider the following suggestion -

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

Execute this code after submitting a form. Keep in mind that if a user refreshes the timer page, the route parameters will be lost and you will need to find an alternative solution. If the data can be obtained from an API, it is recommended to make an API call in the created method of the timer page to load the data in case of a page refresh.

Answer 5

Answer №3

In order to provide a comprehensive solution, I would like to present an additional option. The method suggested by Henrique above is a more straightforward approach to accomplishing my initial objective of routing and passing props to the component without relying on route variables at the URL level.

By utilizing Vuex as part of our store, we can store variables in a globally accessible object that can be accessed across 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 efficiency
    }
  },
  methods: {
    startTimer() {
      // commit changes to the Vuex store using a transactional history model
      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: {
    // mapping local values to global state values
    development() {
      return this.state.development
    },
    stop() {
      return this.state.stop
    }
...

Answer 6

In order to provide a comprehensive solution, I would like to present an additional option. The method suggested by Henrique above is a more straightforward approach to accomplishing my initial objective of routing and passing props to the component without relying on route variables at the URL level.

By utilizing Vuex as part of our store, we can store variables in a globally accessible object that can be accessed across 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 efficiency
    }
  },
  methods: {
    startTimer() {
      // commit changes to the Vuex store using a transactional history model
      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: {
    // mapping local values to global state values
    development() {
      return this.state.development
    },
    stop() {
      return this.state.stop
    }
...

Passing props in VueJS is a common task, especially while redirecting to another

Answer №1

Answer №2

Answer №3

Similar questions

The usage of event.returnValue has been phased out. It is recommended to utilize the standard event.preventDefault()

Experience a seamless transition as the background gently fades in and out alongside the captivating text carousel

Activate $digest when a variable is modified by a node.js function

The state in a functional component in React fails to update after the initial axios call

Retrieving information from an ajax array in PHP

It appears that the SignalR proxy is not defined

Using RTK Query to store data in a Firebase Realtime Database

AngularJS application: the button requires two clicks to activate

The issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

The modal in Bootstrap V5 refuses to hide using JavaScript unless the window method is utilized

The babel-preset-es2016 plugin is in need of the babel-runtime peer dependency, however it seems that it

Setting the width of a div element dynamically according to its height

Tips for leveraging async and await within actions on google and API integration

The double click feature on Vuetify's v-data-table is not functioning as expected

Incorporating various language URLs in Next.js using next-i18n-next functionality

Getting a variable from outside of the observable in Angular - a step-by-step guide

Navigating a Vue.js project with multiple brands and a variety of component types: Tips for success

What is the process for populating dropdown options from state?

The characteristics that define an object as a writable stream in nodejs

Vue's asynchronous handling of props