我正在使用vue-router,并且有一个关于subRoutes的问题。我想设置我的路由,所以主路由是列表,子路由是编辑/添加/等。
我希望subRoute组件替换父路由的<router-view>
。根据我对文档的理解和我所测试的结果,看起来我应该在父组件模板中定义另一个<router-view>
,让subRoute呈现到其中,但是用户列表仍然是可见的。
示例路线:
'/users': {
name: 'user-list',
component(resolve) {
require(['./components/users.vue'], resolve)
},
subRoutes: {
'/add': {
name: 'add-user',
component(resolve) {
require(['./components/users_add.vue'], resolve)
}
}
}
}
主路由器视图:
<!-- main router view -->
<div id="app">
<router-view></router-view>
</div>
用户列表:
<template>
<a v-link="{ name: 'add-user' }">Add</a>
<ul>
<li>{{ name }}</li>
</ul>
</template>
添加用户:
<template>
<div>
<a v-link="{ name: 'user-list' }">back</a>
<input type="text" v-model="name">
</div>
</template>
当我点击"添加"时,我想用添加用户模板填充。这可能吗?
另外,我可以在user-list和add-user组件之间建立父子关系吗?我希望能够将props(用户列表)传递给add组件,并将事件分派回用户列表。
谢谢!
听起来那些编辑/添加路由不应该是子路由,就这么简单。
仅仅因为路径看起来像嵌套并不意味着你必须真正嵌套它们。
'/users': {
name: 'user-list',
component(resolve) {
require(['./components/users.vue'], resolve)
}
},
'users/add': {
name: 'add-user',
component(resolve) {
require(['./components/users_add.vue'], resolve)
}
}
所以我玩了这个相当多,最后弄清楚这是如何实现的。诀窍是使列表也成为子路由,并使根级路由仅为所有子组件提供<router-view>
容器来渲染。然后,将"列表加载"的内容移动到父组件,并将列表作为道具传递给list-component。然后你可以告诉父类通过事件重新加载列表。
现在就这样,它像一个魅力。唯一的缺点是我有另一个并不真正需要的组件。当我有时间的时候,我会用一个例子来跟进。
编辑
按要求添加示例。请注意:此代码来自2016年-它可能不适用于当前的Vue版本。他们改变了事件系统,所以父母/孩子的沟通方式不同了。现在,双向交流被认为是不好的做法(至少我在这里是这样做的)。此外,这些天我会用不同的方式解决这个问题,并在商店中为每个路由提供自己的模块。
也就是说,这是我在2016年添加的例子:让我们继续使用用户的例子——我们有一个页面,您可以在其中列出/添加/编辑用户。
下面是路由定义:
'/users': {
name: 'users',
component(resolve) {
// this is what I meant with "root-level" route, it acts as a parent to the sub routes
require(['./pages/users.vue'], resolve)
},
subRoutes: {
'/': {
name: 'user-list',
component(resolve) {
require(['./pages/users/list.vue'], resolve)
}
},
'/add': {
name: 'user-add',
component(resolve) {
require(['./pages/users/add.vue'], resolve)
}
},
// etc.
}
},
users.vue
<template>
<div>
<router-view :users="users"></router-view>
</div>
</template>
<script>
/**
* This component acts as a parent and sort of state-storage for
* all user child components. It's the route that's loaded at /users.
* the list component is the actual component that is shown though, but since
* that's a sibling of the other child components, we need this.
*/
export default {
events: {
/**
* Update users when child says so
*/
updateUsers() {
this.loadUsers();
}
},
data() {
return {
users: []
}
},
route: {
data() {
// load users from server
if (!this.users.length) {
this.loadUsers();
}
}
},
methods: {
loadUsers() {
// load the users from an API or something
this.users = response.data;
},
}
}
</script>
。/页面/用户/list.vue
<template>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</template>
<script>
export default {
props: ['users'],
// the rest of the component
}
</script>