Vue Router nested routes doesn't route correct component

Question

I create a dashboard with Laravel and vuejs

I use Vue Router to create nested routes like:

/admin
/admin/posts
/admin/posts/add
/admin/posts/edit/:id

I try to switch /admin/posts and /admin/posts/add but it doesn't route correct component. It always routes to App.Vue

here is my code in web.php

Route::get('admin/{any?}', 'App\Http\Controllers\Admin\DashboardController@index')->where('any', '.*');

and code in app.js

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 => h(App),
});

code in routes.js

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
                }
            ]
        }
    ]
}];

App.vue

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Laravel Vue CRUD Example testing</span>
        </div>
 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/admin" class="nav-item nav-link">Home</router-link>
                    <router-link to="/admin/posts/add" class="nav-item nav-link">Add Post</router-link>
                </div>
            </div>
        </nav>
        <br/>
        <router-view></router-view>
    </div>
</template>
 
<script>
    export default {
        created() {
            console.log('app.vue');
        },
    }
</script>

AllPosts.vue

<template>
    <div>
        <h3 class="text-center">All Posts</h3><br/>
 
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
                <th>Created At</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="post in posts" :key="post.id">
                <td>{{ post.id }}</td>
                <td>{{ post.title }}</td>
                <td>{{ post.description }}</td>
                <td>{{ post.created_at }}</td>
                <td>{{ post.updated_at }}</td>
                <td>
                    <div class="btn-group" role="group">
                        <router-link :to="{name: 'posts.edit', params: { id: post.id }}" class="btn btn-primary">Edit</router-link>                    
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                posts: []
            }
        },
        created() {
            console.log('all.vue');            
        },
        methods: {
            deletePost(id) {
                
            }
        }
    }
</script>

AddPost.vue

<template>
    <div>
        <h3 class="text-center">Add Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="addPost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Add Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        methods: {
            addPost() {
            }
        },
        created() {
            console.log('addPost.vue');
        },    
    }
</script>

Thanh you so much!

Are the console.log from the AllPosts.vue and AddPost.vue are printed? — Yash Maheshwari

Dan Dan · Accepted Answer · 2021-01-23T05:50:44

The /admin route has no component defined, so its children have no <router-view> to nest inside of. You could fix this by giving it a component which is nothing more than a <router-view>:

path: '/admin',
component: { template: '<router-view></router-view>' },  // ✅ Add this 
children: [
...
]

But this is a better structure you should use:

routes: [
  {
    path: '/admin',
    redirect: '/admin/posts'
  },
  {
    path: '/admin/posts',
    component: AllPosts,
    children: [
      {
        path: 'add',
        name: 'posts.add',
        component: AddPost
      },
      {
        path: 'edit/:id',
        name: 'posts.edit',
        component: EditPost
      }
    ]
  }
]

Vue Router nested routes doesn't route correct component

1 Answers