[英]Vue Router nested routes doesn't route correct component
我用 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
}
]
}
]
}];
应用程序.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>
添加Post.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>
太感谢你了!
/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
}
]
}
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.