title: How to replace parent view with child route component in Vue
body: <p>I have a Vue routes setup with the following parent and child routes:</p>
  <pre><code>{
      path: '/dashboard', component: dashboard,
      children: [
          {
              path:'report', component: report
          }
      ]
  },
  </code></pre>
  <p>And in the parent component I have some card menus to navigate to the child component and also a router-view:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;container mt-5&quot;&gt;
          &lt;div class=&quot;row mt-0 h-100&quot;&gt;
              &lt;!-- menu item--&gt;
              &lt;div class=&quot;col-lg-4 col-md-4 col-sm-4 col-xs-12 my-auto&quot; id=&quot;report-card&quot;&gt;
                  &lt;router-link to=&quot;/dashboard/report&quot; class=&quot;card2&quot;&gt;
                      &lt;div class=&quot;d-flex flex-column justify-content-center&quot;&gt;
                          &lt;div class=&quot;card-icon p-3&quot;&gt;
                              &lt;img :src=&quot;icons[0]&quot;/&gt;
                          &lt;/div&gt;
                          &lt;h3&gt;Make a Report&lt;/h3&gt;
                          &lt;p class=&quot;small&quot;&gt;Make a report of a crime or suspicious activities&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/router-link&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>When I click on the router link, it does render the child component, but in the parent view.</p>
  <p>Is there a way in which I could replace the parent view entirely with the child route instead of rendering or appending to the parent?</p>