title: How to configure Vue router to respond to query strings?
body: <p>My router in configured as follows. It works and does what it's supposed to.</p>
  
  <pre><code>import Demo1 from "../vuex_modules/demo/demo1.vue"
  import Demo2 from "../vuex_modules/demo/demo2.vue"
  
  export const routes = [
    { path: "/demo/demo1", component: Demo1 },
    { path: "/demo/demo2", component: Demo2 }
  ];
  </code></pre>
  
  <p>Now, I need to match me some query strings. When I click in one of the views routed to above, I want the object pushed to the router to look like this.</p>
  
  <pre><code>export default {
    methods: {
      clicky: function(row) {
        this.$router.push({ path: "", query: { id: row } });
      }
    }
  }
  </code></pre>
  
  <p>I want the new URL, with <em>?id=123</em> added, to lead to another page (while <em>demo2.vue</em> is the table view, <em>demo2_id.vue</em> is supposed to be displayed upon a click and present details for the particular row being clicked.</p>
  
  <p>According to <a href="https://router.vuejs.org/en/essentials/dynamic-matching.html" rel="nofollow noreferrer">Vue router docs</a>, I'm suppose to add a colon when a part of URL is dynamic. I've tried different approaches, including the one below. I'm not routed to the page requested, though. Instead, I dwell still on the original page.</p>
  
  <pre><code>import Demo1 from "../vuex_modules/demo/demo1.vue"
  import Demo2 from "../vuex_modules/demo/demo2.vue"
  import Demo2_Id from "../vuex_modules/demo/demo2_id.vue"
  
  export const routes = [
    { path: "/demo/demo1", component: Demo1 },
    { path: "/demo/demo2", component: Demo2 },
    { path: "/demo/demo2?:id", component: Demo2_Id }
  ];
  </code></pre>
  
  <p>Goolearching for <em>vue router query strings</em> leads to nothing that I can regard as useful (possibly due to ignorance)...</p>