概念 嵌套路由在 VUE 中表示为路由嵌套。子路由定义在父路由内部,继承父路由的路径并添加自己的路径段。通过这种方式,您可以创建分层路由结构,其中每个级别都代表应用程序的不同部分或功能。
实践 1. 设置嵌套路由 首先,在 Vue Router 实例中定义嵌套路由:
const router = new VueRouter({
routes: [
{
path: "/parent",
component: Parent,
children: [
{
path: "child1",
component: Child1
},
{
path: "child2",
component: Child2
}
]
}
]
})
2. 渲染嵌套视图
使用 <router-view>
组件在父组件中渲染嵌套视图:
<template>
<div>
<router-view></router-view>
</div>
</template>
3. 访问父路由参数
在子路由中,可以使用 this.$parent.$route.params
访问父路由的参数:
export default {
mounted() {
console.log(this.$parent.$route.params.id)
}
}
4. 传递数据到嵌套视图
可以使用 props
对象将数据从父路由传递到嵌套视图:
// 父组件
export default {
router: {
children: [
{
path: "child",
component: Child,
props: {
data: "some data"
}
}
]
}
}
5. 动态嵌套路由 可以在运行时动态添加和删除嵌套路由:
// 添加子路由
this.$router.addRoutes([{ path: "new-child", component: NewChild }])
// 删除子路由
this.$router.removeRoutes(["child1"])
优势 嵌套路由提供了以下优势:
- 模块化代码结构
- 改进的用户体验
- 更好的代码可维护性
- 灵活的应用程序导航
最佳实践
- 使用命名路由以提高可读性和可维护性。
- 为嵌套视图定义适当的布局组件。
- 避免嵌套深度过深,以保持代码清晰度。
- 使用路由守卫控制对嵌套视图的访问。