title: Vue js router: how to change or update URL query on click event
body: <p>I am trying to change/update the router query on click event in my navigation. But no matter what I do, the click event don't change the query in URL.</p>
  
  <p>But in the vue in-component guard "beforeRouteUpdate" I get the new parameters if I console.log(to.query.scrollto);</p>
  
  <p>Maybe someone have an idea or a better solution how I can fix this?</p>
  
  <p>This is my intention:</p>
  
  <blockquote>
    <p>myhomepage.de/?scrollto=about<br>
    myhomepage.de/?scrollto=contact<br>
    myhomepage.de/otherpage/?scrollto=about<br>
    myhomepage.de/anotherpage/?scrollto=service<br>
    ...</p>
  </blockquote>
  
  <p>These are my settings:</p>
  
  <p>Router settings:</p>
  
  <pre><code>export default new Router({
  mode: 'history',
  base: __dirname,
  routes: [
      {
          path: '/',
          name: 'home',
          component: Page
      },
      {
          path: '*',
          component: NotFound
      }]
  </code></pre>
  
  <p>})</p>
  
  <p>My navigation links:</p>
  
  <pre><code>a(href="" @click.prevent="updateNav(item.key)") {{item.title}}
  </code></pre>
  
  <p>In my methods:</p>
  
  <pre><code>updateNav(query) {
      var data = Object.assign({}, this.$route.query);
      data['scrollto'] = query;
      this.$router.push({name: 'home', query : data });
      ...
  }
  </code></pre>