使用 router-view 和 router-link 实现嵌套路由

当我们需要在一个页面中展示多个组件的时候，可以使用 Vue.js 的嵌套路由功能。嵌套路由将一个组件作为父级路由，同时在该组件中展示它的子路由组件。

在 Vue.js 中，可以使用 `router-view` 和 `router-link` 来实现嵌套路由。`router-view` 是一个路由出口，用于展示当前路由对应的组件，而 `router-link` 则是一个路由链接，用于跳转到指定的路由。

下面是一个简单的嵌套路由示例：

<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` 路由路径。

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child1',
  data() {
    return {
      title: '子页面1',
      content: '这是子页面1的内容',
    }
  },
}
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child2',
  data() {
    return {
      title: '子页面2',
      content: '这是子页面2的内容',
    }
  },
}
</script>

最后，我们需要在路由配置中声明父级路由和子路由：

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` 组件，并在父级页面中展示。