vue路由学习 --4 嵌套路由和命名视图

在 Vue 中，嵌套路由是指在一个父级路由下面嵌套子路由，这样可以实现在同一个页面中加载多个组件，每个组件对应一个子路由。嵌套路由的使用可以帮助组织和管理复杂的页面结构，提高代码的可维护性和可读性。

下面是一个简单的示例，演示如何在 Vue 中使用嵌套路由：

在路由配置中定义父级路由和子路由：

点击查看代码

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      {
        path: 'overview',
        component: OverviewComponent
      },
      {
        path: 'stats',
        component: StatsComponent
      }
    ]
  }
];

在父级组件中添加 router-view 来显示子路由对应的组件, 创建router-link 来导航到子路由：

点击查看代码

<template>
  <div>
    <h1>Dashboard</h1>
    <router-link to="/dashboard/overview">Overview</router-link>
    <router-link to="/dashboard/stats">Stats</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'DashboardLayout',
};
</script>

在 Vue 中，命名视图（Named Views）是一种在同一个路由组件中同时显示多个组件的技术。命名视图允许您在同一个路由规则下，同时渲染多个组件，并将它们显示在不同的位置。这对于实现复杂的页面布局或者需要在同一页面显示多个视图的情况非常有用。

要在 Vue 中使用命名视图，您需要在路由配置中指定每个视图的名称，并在组件中使用标签来显示对应的命名视图。
以下是一个简单的示例来说明如何在 Vue 中使用命名视图：

在路由配置中定义命名视图：

点击查看代码

const routes = [
  {
    path: '/',
    components: {
          default: TopComponent,
          left: LeftComponent,
          right: RightComponent,
          footer: BottomComponent
      }
  }
];

在父级组件中使用标签来显示命名视图：

点击查看代码

<template>
  <div>
    <header>
      <router-view name="header"></router-view>
    </header>
    <div class="main">
      <div class="left">
        <router-view name="left"></router-view>
      </div>
      <div class="right">
        <router-view name="right"></router-view>
      </div>
    </div>
    <footer>
      <router-view name="footer"></router-view>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'MainLayout',
};
</script>

<style>
.main {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
}
</style>