用子路由替换父视图
vue-router replace parent view with subRoute
我正在使用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>
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 我如何找到一个句子中的所有空格并替换忽略它们
- 如何使用javascript从主svg对象动态创建svg视图框
- 正在使用$location.path(.)路由ng视图
- angular.js没有'无法在PhoneGap中处理视图标记
- 如何包含特定于每个视图angularjs的javascript文件
- 在视图被替换后,主干视图事件未激发,然后放回页面上
- 主干:如何在视图中将一个模型替换为另一个模型
- 在 Web 视图中设置 innerHTML 将替换整个文档,而不仅仅是元素
- 离子替换新视图的选项卡和页脚
- 查看 json,然后单击该 json 中的 links.json,并将其替换为当前 json 视图
- 用编辑表单替换视图数据
- Angular UI路由器在运行时替换视图
- 如何替换一个单一的ui-视图,如果我有多个ui-视图在一个单一的html
- 用子路由替换父视图
- Javascript/Typescript -在视图中将用户ID替换为用户名
- jQuery中的RegEx在SharePoint的多行文本字段列表视图中用链接替换模式
- AngularJS视图没有't在替换值时更新
- 如何在AngularJS中将一个子视图替换为另一个子视图
- c# mvc动作用纯文本替换视图