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
}