Vue-Router 嵌套使用：轻松实现页中页效果

2023-11-22 15:11:28

title>Vue-Router 嵌套使用：轻松实现页中页效果</#title>

在单页面应用中，我们经常需要在某个页面内动态加载另一个页面，从而实现页中页的效果。这正是 Vue-Router 嵌套路由的用武之地。通过嵌套路由，我们可以轻松地将一个页面作为另一个页面的子页面，从而创建出层级式的页面结构。

步骤一：配置完父路由后添加子路由

首先，我们需要先配置好父路由，然后才能添加子路由。在 Vue-Router 中，我们可以通过 children 选项来定义子路由。子路由的配置方式与父路由类似，不过需要指定其父路由的名称。

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
]

在上面的示例中，我们将 ChildComponent 作为 ParentComponent 的子组件，并通过 path: 'child' 将其映射到 '/parent/child' 路径。

步骤二：将子路由放置父路由需要映射的位置

接下来，我们需要将子路由放置到父路由需要映射的位置。这可以通过在父组件的模板中使用 <router-view> 标签来实现。<router-view> 标签会动态地渲染当前激活的子路由组件。

<template>
  <div>
    <h1>父组件</h1>
    <router-view></router-view>
  </div>
</template>

在上面的示例中，我们在 ParentComponent 的模板中使用了 <router-view> 标签，表明当前激活的子路由组件将被渲染在该位置。

步骤三：示例需要引入的页面效果

现在，我们已经完成了 Vue-Router 嵌套路由的基本配置。接下来，让我们看一个具体的示例，演示如何使用嵌套路由来实现页中页效果。

假设我们有一个博客应用，其中包含一个文章列表页面和一个文章详情页面。我们可以使用嵌套路由来将文章详情页面作为文章列表页面的子页面，从而在文章列表页面中动态加载文章详情页面。

const routes = [
  {
    path: '/articles',
    component: ArticlesComponent,
    children: [
      {
        path: ':id',
        component: ArticleDetailComponent
      }
    ]
  }
]

在上面的示例中，我们将 ArticleDetailComponent 作为 ArticlesComponent 的子组件，并通过 path: ':id' 将其映射到 '/articles/:id' 路径。这样，当我们访问 '/articles/1' 时，ArticleDetailComponent 将被渲染在 ArticlesComponent 的 <router-view> 标签中，从而实现页中页的效果。