title: (Vue.js) Same component with different routes
body: <p>I would like to use the same component for different routes in a Vue.js application.</p>
  
  <p>I currently have something like this:</p>
  
  <hr>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>const routes = [
      { path: '/route-1', name: 'route-1', component: MyComponent },
      { path: '/route-2', name: 'route-2', component: MyComponent },
      { path: '/route-3', name: 'route-3', component: MyComponent },
  
  ]
  
  const router = new VueRouter({
      routes
  })
  </code></pre>
  
  <hr>
  
  <p><strong>myComponent.vue</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;router-link to="/route-1"&gt;Route 1&lt;/router-link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;router-link to="/route-2"&gt;Route 2&lt;/router-link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;router-link to="/route-3"&gt;Route 3&lt;/router-link&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <hr>
  
  <p>When I type the route manually in the browser, everything is working well, but when I try to navigate between the routes using some of these <em>router-generated-links</em>, nothing happens. The route changes but the content is still the same. Any idea how I can solve this?</p>
  
  <p>Thanks!</p>