当我们需要在一个页面中展示多个组件的时候，可以使用
Vue.js 的
嵌套路由功能。
嵌套路由将一个组件作为父级路由，同时在该组件中展示它的子路由组件。
在
Vue.js 中，可以使用 `router-view` 和 `
router-link` 来实现
嵌套路由。`router-view` 是一个路由出口，用于展示当前路由对应的组件，而 `
router-link` 则是一个路由链接，用于跳转到指定的路由。
下面是一个简单的
嵌套路由示例：
```html
<template>
<div>
<h1>父级页面</h1>
<ul>
<li>
<
router-link to="/parent/child1">子页面1</
router-link>
</li>
<li>
<
router-link to="/parent/child2">子页面2</
router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Parent',
components: {},
}
</script>
```
在上面的代码中，我们定义了一个父级页面组件 `Parent`，并在其中使用了 `
router-link` 来跳转到子路由。同时，在父级组件中使用了 `router-view` 来展示子路由组件。
接下来，我们还需要定义子路由组件。这里我们定义了两个子路由组件 `Child1` 和 `Child2`，它们分别对应 `/parent/child1` 和 `/parent/child2` 路由路径。
```html
<template>
<div>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'Child1',
data() {
return {
title: '子页面1',
content: '这是子页面1的内容',
}
},
}
</script>
```
```html
<template>
<div>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'Child2',
data() {
return {
title: '子页面2',
content: '这是子页面2的内容',
}
},
}
</script>
```
最后，我们需要在路由配置中声明父级路由和子路由：
```js
const routes = [
{
path: '/parent',
name: 'Parent',
component: Parent,
children: [
{
path: 'child1',
name: 'Child1',
component: Child1,
},
{
path: 'child2',
name: 'Child2',
component: Child2,
},
],
},
]
```
在上面的路由配置中，我们声明了 `/parent` 路由作为父级路由，同时它有两个子路由 `/parent/child1` 和 `/parent/child2`。当用户访问 `/parent/child1` 或 `/parent/child2` 路由时，会分别
渲染 `Child1` 和 `Child2` 组件，并在父级页面中展示。
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
