命名视图

# 命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

const routes = [
  {
    path: "/",
    components: {
      nav: NavBar,
      default: HomePage,
      footer: FooterView,
    },
  },
  {
    path: "/about",
    components: {
      nav: NavBar,
      default: AboutMe,
      footer: FooterViewAbout,
    },
  },
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- App.vue -->
<template>
  <nav>
    <router-view name="nav"></router-view>
  </nav>
  <main>
    <router-view></router-view>
  </main>
  <footer>
    <router-view name="footer"></router-view>
  </footer>
</template>

1
2
3
4
5
6
7
8
9
10
11
12

# 嵌套中使用命名视图

const routes = [
  {
    path: "/blogs",
    component: BlogManagement,
    children: [
      {
        path: "new",
        components: {
          default: AddBlog,
          rightSideBar: RightSidebar,
        },
      },
      {
        path: "details",
        component: BlogDetails,
      },
    ],
  },
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- BlogManagement.vue -->
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

编辑

上次更新: 2023/04/01, 15:26:22

← 编程式导航高亮活动导航→