title: Make Vue Router Queries Persist at Parent Component Level
body: <p>I have an app where a component, <code>Foo</code>, is used as a template for a route, <code>app/foo</code>. This component has child components which are also used as templates for routes: <code>app/foo/bar</code>, <code>app/foo/baz</code>, etc. </p>
  
  <p>I am binding a global <code>vuex</code> store object to the <code>query</code> property of the route so that if the object is set to, say, <code>{ a: 1, b: 2 }</code>, the url params will change to <code>?a=1&amp;b=2</code>; and if the user changes the params to, say, <code>?a=0&amp;b=0</code>, the object will update to be <code>{ a: 0, b: 0 }</code>. This is all working as expected.</p>
  
  <p>The trouble I'm having is that, when I then route to any path under <code>app/foo</code>, I lose the route's <code>query</code> property and the url params disappear. </p>
  
  <p>I can pass the <code>query</code> object dynamically like so:</p>
  
  <pre><code>this.$router.push({ name: 'bar', query: this.$route.query });
  </code></pre>
  
  <p>But, this is quickly getting hard to maintain.</p>
  
  <p>I know Vue Router provides <a href="https://router.vuejs.org/en/advanced/navigation-guards.html" rel="nofollow noreferrer">added life-cycle events</a>, and I thought I should be able to update the query on the <code>Foo</code> component's <code>beforeRouteUpdate</code> event. I've made a few different attempts, but no dice:</p>
  
  <pre><code>beforeRouteUpdate (to, from, next) {
    // This gives me an error saying that the query is read-only 
    to.query = from.query; 
  
    // This does not update the query
    this.$router.replace({ query: from.query })
  
    next();
  }, 
  </code></pre>
  
  <h3>Edit:</h3>
  
  <p>I also tried setting a watcher on <code>$route</code> to replace the query when the route changes. However, this causes an infinite loop: </p>
  
  <pre><code>watch: {
    $route(to, from) {
      this.$router.replace({ query: from.query });
    }
  }
  </code></pre>
  
  <p>Does anyone know a way to make the Vue Router query persistent at a component-level?</p>