（十三）在嵌套路由中使用命名视图

老怪兽

发布于 2023-02-22 18:37:41

36800

代码可运行

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

运行总次数：0

代码可运行

在嵌套路由中使用命名视图

说明

如果我们要做到如下图着两个效果，就可以使用命名视图

右侧显示博客标题和分类

右侧显示博客详情

是由使用命名路由完成效果

router.js 配置

import AddBlog from "./pages/AddBlog.vue";
import BlogDetails from "./pages/BlogDetails.vue";
import BlogManagement from "./pages/BlogManagement.vue";
import RightSidebar from "./pages/RightSidebar.vue";

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/blogs",
    component: BlogManagement,
    children: [
      {
        path: "new",
        // 使用命名视图，右侧展示两个视图
        components: {
          default: AddBlog,
          rightSideBar: RightSidebar,
        },
      },
      {
        path: "details",
        // 右侧只显示一个视图
        component: BlogDetails,
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

组件使用命名视图

<template>
  <div class="container">
    <aside class="leftSideBar">
      <h2>博客管理</h2>
      <nav>
        <router-link to="/blogs/new">添加博客</router-link>
        <router-link to="/blogs/details">博客详情</router-link>
      </nav>
    </aside>
    <main class="content">
      <!-- 默认视图 -->
      <router-view></router-view>
      <!-- 右侧分类视图 -->
      <router-view name="rightSideBar"></router-view>
    </main>
  </div>
</template>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月14日，如有侵权请联系 cloudcommunity@tencent.com 删除

router