Vue Router 嵌套路由没有路由正确的组件

Posted 2023-02-23

【中文标题】Vue Router 嵌套路由没有路由正确的组件

【英文标题】：Vue Router nested routes doesn't route correct component

【发布时间】：2021-04-27 12:25:51

【问题描述】：

我用 Laravel 和 vuejs 创建了一个仪表板

我使用 Vue Router 创建嵌套路由，例如：

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

我尝试切换 /admin/posts 和 /admin/posts/add 但它没有路由正确的组件。它总是路由到 App.Vue

这是我在 web.php 中的代码

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

和 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),
);

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>

非常感谢你！

【问题讨论】：

是否打印了来自AllPosts.vue 和AddPost.vue 的console.log？

【参考方案1】：

/admin 路由没有定义组件，所以它的子路由没有<router-view> 可以嵌套在其中。你可以通过给它一个只不过是<router-view>的组件来解决这个问题：

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

但这是你应该使用的更好的结构：

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