vue-11（命名路由和命名视图）

命名路由和命名视图

命名路由和命名视图提供了组织和导航 Vue.js 应用程序的强大方法，尤其是在它们的复杂性增加时。它们提供了一种语义更合理、可维护的路由方法，使您的代码更易于理解和修改。命名路由允许您按名称引用路由，而不是依赖 URL，而命名视图允许您根据当前路由在页面的不同部分呈现多个组件。本课将详细探讨这些概念，为您提供在 Vue.js 项目中有效使用它们的知识和技能。

命名路由

命名路由提供了一种为应用程序中的每个路由分配唯一名称的方法。这允许您使用路由的名称而不是 URL 导航到路由，从而使您的代码更具可读性和可维护性。如果 URL 结构发生更改，则只需更新路由定义，并且按名称对该路由的所有引用都将自动更新。

定义命名路由

要定义命名路由，只需向路由配置对象添加 name 属性即可。

const routes = [
  {
    path: '/users/:id',
    name: 'user', // This is the named route
    component: User,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
];

在此示例中，我们定义了两个命名路由：user 和 about。 用户路由还包括一个动态段 ：id。

使用命名路由导航

一旦你定义了一个命名路由，你就可以使用它通过 router.push（） 以编程方式导航，或者在你的模板中使用 <router-link>。

编程导航：

// Assuming you have access to the router instance (e.g., this.$router)
this.$router.push({ name: 'user', params: { id: 123 } });

在这里，我们将导航到 id 参数设置为 123 的用户路由。

使用 <router-link> 导航：

<router-link :to="{ name: 'user', params: { id: 456 } }">Go to User 456</router-link>
<router-link :to="{ name: 'about' }">About Us</router-link>

<router-link> 组件会根据命名路由及其参数自动生成正确的 URL。

使用命名路由的好处

• 可读性： 使用名称而不是 URL 可以使您的代码更易于理解。
• 可维护性： 如果更改 URL，则只需更新路由定义，而无需更新使用该 URL 的每个实例。
• 灵活性： 命名路由可以更轻松地重构应用程序和更改 URL 结构，而不会破坏现有导航。

示例：电子商务应用程序

考虑一个带有产品页面的电子商务应用程序。您可以使用命名路由，而不是对产品页面 URL 进行硬编码：

const routes = [
  {
    path: '/products/:productId',
    name: 'product',
    component: ProductDetails,
  },
];

现在，要导航到特定的产品页面：

<router-link :to="{ name: 'product', params: { productId: product.id } }">{{ product.name }}</router-link>

如果您稍后决定将产品页面 URL 更改为 /item/:p roductId，则只需更新路由定义，使用名为 route 的产品的所有链接都将自动更新。

示例：博客应用程序

在博客应用程序中，您可能有用于单个博客文章的路由。使用命名路由可以简化链接到这些文章的过程：

const routes = [
  {
    path: '/posts/:postId',
    name: 'post',
    component: BlogPost,
  },
];

链接到特定的博客文章：

<router-link :to="{ name: 'post', params: { postId: post.id } }">{{ post.title }}</router-link>

练习：在简单应用程序中实现命名路由

1. 使用 Vue CLI 创建一个新的 Vue.js 项目。
2. 定义三个组件： 主页 、 产品和``联系人 。
3. 创建 router.js 文件并为每个零部件定义路由，分配 home、products 和 contact 等名称。
4. 在 App.vue 文件中，使用带有命名路由的 <router-link> 组件创建指向每个页面的导航链接。
5. 为产品详细信息 （/products/：id） 添加名称为 product-detail 的动态路由。
6. 在 Products 组件中，创建一个产品列表，并使用 <router-link> 和 product-detail 命名路由链接到每个产品的详细信息页面。

命名视图

命名视图允许您在单个线路中同时显示多个零部件。这对于创建具有多个部分的布局（如侧边栏、主内容区域和页脚）非常有用。

定义命名视图

要定义命名视图，请在路由配置中使用 components 选项，而不是 component 选项。components 选项是一个对象，其中每个键是视图的名称，每个值是要在该视图中呈现的组件。

const routes = [
  {
    path: '/dashboard',
    components: {
      default: Dashboard, // The default view
      sidebar: Sidebar,
      notifications: Notifications,
    },
  },
];

在此示例中，我们定义了三个命名视图：default、sidebar 和 notifications。 默认视图在 <router-view> 中呈现，没有 name 属性，而其他视图在 <router-view> 组件中呈现，具有相应的 name 属性。

渲染命名视图

要渲染命名视图，您需要在模板中使用多个 <router-view> 组件，每个组件都有一个与要渲染的视图名称匹配的 name 属性。

<template>
  <div>
    <header>
      <h1>Dashboard</h1>
    </header>
    <div class="container">
      <aside>
        <router-view name="sidebar"></router-view>
      </aside>
      <main>
        <router-view></router-view>  <!-- Default view -->
      </main>
      <aside>
        <router-view name="notifications"></router-view>
      </aside>
    </div>
    <footer>
      <p>&copy; 2023</p>
    </footer>
  </div>
</template>

在此示例中， 边栏组件将呈现在 <router-view name="sidebar"> 中， 仪表板组件（默认视图）将呈现在 <router-view> 中， 通知组件将呈现在 <router-view name="notifications"> .

使用命名视图的好处

• 布局灵活性： 命名视图允许您创建同时呈现多个组件的复杂布局。
• 代码组织： 它们通过将页面的不同部分分离到单独的组件中来帮助您组织代码。
• 可 重用： 您可以通过将相同的组件分配给不同的命名视图，在不同的布局中重用这些组件。

示例：管理员面板

考虑一个带有侧边栏、主要内容区域和通知部分的管理面板。您可以使用命名视图来构建此布局：

const routes = [
  {
    path: '/admin',
    components: {
      default: AdminDashboard,
      sidebar: AdminSidebar,
      notifications: AdminNotifications,
    },
  },
];

模板将如下所示：

<template>
  <div class="admin-layout">
    <aside class="sidebar">
      <router-view name="sidebar"></router-view>
    </aside>
    <main class="content">
      <router-view></router-view>
    </main>
    <aside class="notifications">
      <router-view name="notifications"></router-view>
    </aside>
  </div>
</template>

示例：具有多个部分的应用程序

假设有一个应用程序，其中包含页眉、主要内容和页脚。命名视图可以帮助构建此结构：

const routes = [
  {
    path: '/app',
    components: {
      header: AppHeader,
      default: AppContent,
      footer: AppFooter,
    },
  },
];

模板：

<template>
  <div class="app-layout">
    <header>
      <router-view name="header"></router-view>
    </header>
    <main class="content">
      <router-view></router-view>
    </main>
    <footer>
      <router-view name="footer"></router-view>
    </footer>
  </div>
</template>

练习：在 Dashboard 应用程序中实现命名视图

1. 从上一个练习扩展项目。
2. 创建 3 个组件：DashboardContent、DashboardSidebar 和 DashboardNotifications。
3. 为 /dashboard 创建路由，并使用命名视图在具有侧边栏、主内容区域和通知部分的布局中呈现这些组件。
4. 在 App.vue 文件中，添加具有适当 name 属性的 <router-view> 组件来渲染命名视图。
5. 使用 CSS 设置布局样式，以创建具有视觉吸引力的仪表板。

组合命名路由和命名视图

您可以组合命名路由和命名视图，以创建更加灵活和可维护的路由配置。这允许您导航到特定布局，其中多个组件使用路由名称同时呈现。

示例：组合命名路由和命名视图

const routes = [
  {
    path: '/admin/users',
    name: 'admin-users',
    components: {
      default: AdminUsers,
      sidebar: AdminSidebar,
      notifications: AdminNotifications,
    },
  },
];

现在，你可以使用 admin-users 命名 route 导航到此布局：

<router-link :to="{ name: 'admin-users' }">Manage Users</router-link>

此方法提供了一种清晰简洁的方式来导航到具有多个组件的复杂布局。