vue router params on data change

Question

I have a splitted interface like you can see it in the following example image. On the left you can see the app.vue content. On the right the router-view content. With the menu bar on the top of the app.vue content you can switch between the different router-link and change therefore the router-view on the left side. so far so good.

But now the problem: in my app.vue there are user inputs which are stored in data variables. The user input is part of the app.vue content but is also needed in the router-view.

My current version sends the user input with router-link params to the router view. The problem is that on page load and when the user input changes the data on the router view is deprecated. To show the correct data again I have to trigger the router links.

App.vue:

<template>
  <div>

    <router-link :to="{ name: 'route01', params: { data: userinput } }">
      01 route
    </router-link>

    <router-link :to="{ name: 'route02', params: { data: userinput } }">
      02 route
    </router-link>

  </div>
</template>


<script>
export default {
  data: function() {
    return {
      userinput: 'foo',
    }
  }
}
</script>

route01.vue:

<template>
<div class="container">
  <h1>{{userinput}}</h1>
</div>
</template>

<script>
export default {
  data: function() {
    return {
      userinput: 'no input',
    };
  },
  created: function() {
    this.userinput = this.$route.params.userinput;
  }
}
</script>

How can I reload the router view everytime the user input changed? And How can I send the default user input value on page load to the default router link?

Husam Ibrahim Husam Ibrahim · Accepted Answer · 2018-10-29T14:41:22

If you make your userinput an object it will be passed by reference. That way any updates made to this object would be reflected in any component that holds a reference to the same object ..

App.vue

<template>
  <div>

    <router-link :to="{ name: 'route01', params: { userinput } }">
      01 route
    </router-link>

    <router-link :to="{ name: 'route02', params: { userinput } }">
      02 route
    </router-link>

  </div>
</template>


<script>
export default {
  data: function() {
    return {
      userinput: { text: 'foo' },
    }
  }
}
</script>

route01.vue

<template>
<div class="container">
  <h1>{{ userinput.text }}</h1>
</div>
</template>

<script>
export default {
  data: function() {
    return {
      userinput: { text: 'no input' },
    };
  },
  created: function() {
    this.userinput = this.$route.params.userinput;
  }
}
</script>

vue router params on data change

1 Answers