title: Vue Router nested routes doesn't route correct component
body: <p>I create a dashboard with Laravel and vuejs</p>
  <p>I use Vue Router to create  nested routes like:</p>
  <pre><code>/admin
  /admin/posts
  /admin/posts/add
  /admin/posts/edit/:id
  </code></pre>
  <p>I try to switch /admin/posts and /admin/posts/add but it doesn't route correct component. It always routes to App.Vue</p>
  <p>here is my code in web.php</p>
  <pre><code>Route::get('admin/{any?}', 'App\Http\Controllers\Admin\DashboardController@index')-&gt;where('any', '.*');
  </code></pre>
  <p>and code in app.js</p>
  <pre><code>require('./bootstrap');
  import Vue from 'vue';
  
  import App from './App.vue';
  import VueRouter from 'vue-router';
  import VueAxios from 'vue-axios';
  import axios from 'axios';
  import { routes } from './routes';
  
  Vue.use(VueRouter);
  Vue.use(VueAxios, axios);
  
  const router = new VueRouter({
      mode: 'history',
      routes: routes
  });
  
  const app = new Vue({
      el: '#app',
      router: router,
      render: h =&gt; h(App),
  });
  </code></pre>
  <p>code in routes.js</p>
  <pre><code>import AllPosts from './components/dashboard/AllPosts.vue';
  import AddPost from './components/dashboard/AddPost.vue';
  import EditPost from './components/dashboard/EditPost.vue';
  import { postCss } from 'laravel-mix';
  
  export const routes = [{
      path: '/admin',
      children: [
          { path: '', redirect: { name: 'posts' } },
          {
              path: 'posts',
              name: 'posts',
              component: AllPosts,
              children: [
                  //{ path: '', redirect: { name: 'posts' } },
                  {
                      path: 'add',
                      name: 'posts.add',
                      component: AddPost
                  },
                  {
                      path: 'edit/:id',
                      name: 'posts.edit',
                      component: EditPost
                  }
              ]
          }
      ]
  }];
  </code></pre>
  <p>App.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;text-center&quot; style=&quot;margin: 20px 0px 20px 0px;&quot;&gt;
              &lt;span class=&quot;text-secondary&quot;&gt;Laravel Vue CRUD Example testing&lt;/span&gt;
          &lt;/div&gt;
   
          &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
              &lt;div class=&quot;collapse navbar-collapse&quot;&gt;
                  &lt;div class=&quot;navbar-nav&quot;&gt;
                      &lt;router-link to=&quot;/admin&quot; class=&quot;nav-item nav-link&quot;&gt;Home&lt;/router-link&gt;
                      &lt;router-link to=&quot;/admin/posts/add&quot; class=&quot;nav-item nav-link&quot;&gt;Add Post&lt;/router-link&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;br/&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
   
  &lt;script&gt;
      export default {
          created() {
              console.log('app.vue');
          },
      }
  &lt;/script&gt;
  </code></pre>
  <p>AllPosts.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h3 class=&quot;text-center&quot;&gt;All Posts&lt;/h3&gt;&lt;br/&gt;
   
          &lt;table class=&quot;table table-bordered&quot;&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                  &lt;th&gt;Created At&lt;/th&gt;
                  &lt;th&gt;Updated At&lt;/th&gt;
                  &lt;th&gt;Actions&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr v-for=&quot;post in posts&quot; :key=&quot;post.id&quot;&gt;
                  &lt;td&gt;{{ post.id }}&lt;/td&gt;
                  &lt;td&gt;{{ post.title }}&lt;/td&gt;
                  &lt;td&gt;{{ post.description }}&lt;/td&gt;
                  &lt;td&gt;{{ post.created_at }}&lt;/td&gt;
                  &lt;td&gt;{{ post.updated_at }}&lt;/td&gt;
                  &lt;td&gt;
                      &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
                          &lt;router-link :to=&quot;{name: 'posts.edit', params: { id: post.id }}&quot; class=&quot;btn btn-primary&quot;&gt;Edit&lt;/router-link&gt;                    
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
   
  &lt;script&gt;
      export default {
          data() {
              return {
                  posts: []
              }
          },
          created() {
              console.log('all.vue');            
          },
          methods: {
              deletePost(id) {
                  
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>AddPost.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h3 class=&quot;text-center&quot;&gt;Add Post&lt;/h3&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;form @submit.prevent=&quot;addPost&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label&gt;Title&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;post.title&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label&gt;Description&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;post.description&quot;&gt;
                      &lt;/div&gt;
                      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Add Post&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
   
  &lt;script&gt;
      export default {
          data() {
              return {
                  post: {}
              }
          },
          methods: {
              addPost() {
              }
          },
          created() {
              console.log('addPost.vue');
          },    
      }
  &lt;/script&gt;
  </code></pre>
  <p>Thanh you so much!</p>