Question

我正在使用vue-router并对subRoutes有疑问。我想设置我的路线，所以主路线是列表，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组件，并将事件发送回用户列表。

谢谢！

Answer 1

听起来那些编辑/添加路线不应该是subRoutes，就像那样简单。

只是因为路径看起来像嵌套并不意味着你必须实际嵌套它们。

'/users': {
    name: 'user-list',
    component(resolve) {
      require(['./components/users.vue'], resolve)
    }
},
'users/add': {
    name: 'add-user',
    component(resolve) {
      require(['./components/users_add.vue'], resolve)
    }
}

Answer 2

所以我玩了很多，最后想出了如何实现这一目标。诀窍是使列表也成为一个subRoute，并让根级路由只提供一个<router-view>容器，供所有子组件呈现。然后，移动＆＃34;列表加载＆＃34;填充到父组件并将列表作为prop传递给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>

vue-router用subRoute替换父视图

2 个答案: