解释 Vue Router 中命名视图 (Named Views) 的高级应用，例如在复杂的布局中同时渲染多个组件。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，大家好！今天咱们来聊聊 Vue Router 里一个稍微高级一点，但绝对好用的技巧：命名视图（Named Views）。

想象一下，你搞一个网站，页面布局复杂得跟迷宫一样。左边栏要显示用户资料，右边栏要显示推荐内容，中间还得放个主内容区。如果全挤在一个 <router-view> 里，那代码得乱成什么样啊！这时候，命名视图就派上大用场了。

简单来说，命名视图就是允许你在一个路由下同时渲染多个组件到页面上，每个组件都有自己的 <router-view> 占位符，互不干扰，完美解决复杂布局的需求。

1. 基础概念：告别单一的 <router-view>

咱们先从最简单的例子开始。假设我们有一个页面，需要同时显示 Sidebar 和 MainContent 两个组件。

首先，在你的 App.vue 或者其他布局组件里，不再只有一个 <router-view>，而是多个，并且每个都有 name 属性：

<template>
  <div id="app">
    <div id="sidebar">
      <router-view name="sidebar"></router-view>
    </div>
    <div id="main-content">
      <router-view name="main"></router-view>
    </div>
  </div>
</template>

<style scoped>
#app {
  display: flex;
}

#sidebar {
  width: 200px;
  background-color: #f0f0f0;
}

#main-content {
  flex: 1;
  padding: 20px;
}
</style>

看到了没？我们定义了两个 <router-view>，一个叫 sidebar，一个叫 main。这就是命名视图的关键。

接下来，我们需要配置路由，告诉 Vue Router 哪个组件应该渲染到哪个命名视图里。

import { createRouter, createWebHistory } from 'vue-router';
import Sidebar from './components/Sidebar.vue';
import MainContent from './components/MainContent.vue';

const routes = [
  {
    path: '/home',
    components: {
      sidebar: Sidebar,
      main: MainContent
    }
  }
];

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

export default router;

注意看 routes 里的 components 属性，它是一个对象，键就是 <router-view> 的 name，值就是要渲染的组件。这样，当访问 /home 路由时，Sidebar 组件就会渲染到名为 sidebar 的 <router-view> 里，MainContent 组件就会渲染到名为 main 的 <router-view> 里。

2. 高级用法：动态路由与命名视图的结合

命名视图的真正威力在于它能和动态路由结合起来。比如，你想根据不同的用户角色显示不同的侧边栏菜单。

首先，给你的路由加上动态参数：

const routes = [
  {
    path: '/user/:role',
    components: {
      sidebar: () => import('./components/DynamicSidebar.vue'), // 动态导入
      main: () => import('./components/UserProfile.vue')
    },
    props: {
      sidebar: true, // 开启 props 传递
      main: true
    }
  }
];

这里用了动态导入 (() => import(...))，这样可以实现懒加载，提高页面性能。 props: { sidebar: true, main: true } 也很重要，它告诉 Vue Router 把路由参数作为 props 传递给对应的组件。

然后，在 DynamicSidebar.vue 组件里，根据 role props 来决定显示哪些菜单：

<template>
  <div>
    <h2>Sidebar (Role: {{ role }})</h2>
    <ul>
      <li v-if="role === 'admin'">Admin Menu Item 1</li>
      <li v-if="role === 'admin'">Admin Menu Item 2</li>
      <li v-if="role === 'user'">User Menu Item 1</li>
      <li v-if="role === 'user'">User Menu Item 2</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    role: {
      type: String,
      required: true
    }
  }
};
</script>

UserProfile.vue组件可以类似地接收role props并进行显示。

现在，访问 /user/admin 会显示管理员的侧边栏，访问 /user/user 会显示用户的侧边栏，是不是很灵活？

3. 更灵活的配置：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

有时候，你需要在组件渲染之前或者离开之后做一些事情，比如获取数据、保存状态等等。命名视图同样支持这些路由守卫。

import { createRouter, createWebHistory } from 'vue-router';
import Sidebar from './components/Sidebar.vue';
import MainContent from './components/MainContent.vue';
import AnotherComponent from './components/AnotherComponent.vue';

const routes = [
  {
    path: '/complex',
    components: {
      sidebar: Sidebar,
      main: MainContent,
      another: AnotherComponent
    },
    beforeEnter: (to, from, next) => {
      // 在进入路由之前执行
      console.log('进入 /complex 路由');
      next();
    },
    beforeLeave: (to, from, next) => {
      // 在离开路由之前执行
      console.log('离开 /complex 路由');
      next();
    },
    children: [
      {
        path: 'nested',
        components: {
          sidebar: Sidebar, // 可以覆盖父路由的命名视图
          main: () => import('./components/NestedContent.vue')
        }
      }
    ]
  }
];

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

export default router;

在这个例子里，我们在 /complex 路由上定义了 beforeEnter 和 beforeLeave 两个路由守卫。它们会在进入和离开路由时执行。注意，这些守卫是针对整个路由的，而不是针对单个命名视图的。

此外，还展示了命名视图的覆盖：在子路由 nested 中，可以覆盖父路由的 sidebar 命名视图，使得访问 /complex/nested 时，sidebar 仍然显示 Sidebar 组件，而 main 则显示 NestedContent 组件。

4. 嵌套命名视图：更深层次的布局

如果你的布局更复杂，还可以使用嵌套命名视图。比如，MainContent 组件内部也需要根据不同的状态显示不同的内容。

首先，在 MainContent.vue 里添加一个 <router-view>：

<template>
  <div>
    <h2>Main Content</h2>
    <router-view name="inner"></router-view>
  </div>
</template>

然后，在路由配置里，使用 children 属性来定义嵌套的命名视图：

const routes = [
  {
    path: '/home',
    components: {
      sidebar: Sidebar,
      main: MainContent
    },
    children: [
      {
        path: 'profile',
        components: {
          inner: () => import('./components/UserProfile.vue')
        }
      },
      {
        path: 'settings',
        components: {
          inner: () => import('./components/Settings.vue')
        }
      }
    ]
  }
];

现在，访问 /home/profile 会在 MainContent 组件内部的 inner 命名视图里渲染 UserProfile 组件，访问 /home/settings 会渲染 Settings 组件。

5. 命名视图与 keep-alive 的配合

keep-alive 是 Vue 提供的一个组件，可以缓存不活动的组件实例，避免重复渲染，提高性能。命名视图也可以和 keep-alive 配合使用。

<template>
  <div id="app">
    <div id="sidebar">
      <keep-alive>
        <router-view name="sidebar"></router-view>
      </keep-alive>
    </div>
    <div id="main-content">
      <keep-alive>
        <router-view name="main"></router-view>
      </keep-alive>
    </div>
  </div>
</template>

只需要把 <router-view> 包裹在 <keep-alive> 里就可以了。这样，当切换路由时，对应的组件实例会被缓存，下次再访问时，直接从缓存里取出，避免了重新创建组件的开销。

6. 进阶技巧：使用函数式组件简化命名视图

如果你的命名视图组件很简单，只是用来显示一些静态内容，可以使用函数式组件来简化代码。

const routes = [
  {
    path: '/about',
    components: {
      sidebar: { render: () => <h1>About Sidebar</h1> }, // 函数式组件
      main: { render: () => <p>About Main Content</p> } // JSX 语法
    }
  }
];

函数式组件没有状态，没有生命周期钩子，渲染性能更高。这里使用了 render 函数来定义组件的内容，可以直接使用 JSX 语法。

7. 命名视图的注意事项

命名冲突： 确保你的命名视图的 name 属性在同一个页面里是唯一的，否则可能会导致渲染错误。
默认视图： 如果你没有给 <router-view> 指定 name 属性，它就是一个默认视图。默认视图只能有一个，并且只能渲染没有指定 component 属性的路由。
动态组件： 命名视图也可以渲染动态组件，只需要在 components 属性里使用 component 选项就可以了。
props 传递： 记得开启 props 传递，这样才能把路由参数传递给对应的组件。
路由守卫： 路由守卫是针对整个路由的，不是针对单个命名视图。
优先级： 子路由的命名视图会覆盖父路由的命名视图。

8. 命名视图最佳实践

场景	最佳实践
复杂页面布局，需要同时显示多个组件	使用命名视图，将不同的组件渲染到不同的 `<router-view>` 里。
根据用户角色显示不同的侧边栏菜单	使用动态路由和命名视图，根据路由参数动态渲染不同的侧边栏组件。
需要缓存不活动的组件实例，提高性能	将 `<router-view>` 包裹在 `<keep-alive>` 里。
组件很简单，只是用来显示一些静态内容	使用函数式组件来简化代码。
需要在组件渲染之前或者离开之后做一些事情	使用路由守卫 (`beforeRouteEnter`, `beforeRouteUpdate`, `beforeRouteLeave`)。
需要在页面切换时进行平滑过渡	结合 Vue 的 `transition` 组件和命名视图，实现页面切换的动画效果。
多个路由共享同一个组件，但显示不同的内容	使用 `props` 传递数据，或者使用 `computed` 属性根据路由参数计算不同的内容。

9. 实战案例：一个复杂的后台管理系统

假设我们要构建一个复杂的后台管理系统，需要同时显示：

顶部导航栏 (TopNavbar)： 显示用户登录信息、系统名称等。
侧边栏菜单 (Sidebar)： 提供导航功能。
主内容区域 (MainContent)： 显示具体的内容，比如用户列表、文章列表等。
底部版权信息 (Footer)： 显示版权信息。

我们可以这样配置路由：

const routes = [
  {
    path: '/',
    components: {
      top: () => import('./components/TopNavbar.vue'),
      sidebar: () => import('./components/Sidebar.vue'),
      main: () => import('./components/MainContent.vue'),
      footer: () => import('./components/Footer.vue')
    },
    children: [
      {
        path: 'users',
        components: {
          main: () => import('./components/UserList.vue') // 覆盖父路由的 main 命名视图
        }
      },
      {
        path: 'articles',
        components: {
          main: () => import('./components/ArticleList.vue') // 覆盖父路由的 main 命名视图
        }
      }
    ]
  }
];

在 App.vue (或者 Layout.vue) 中：

<template>
  <div id="app">
    <header>
      <router-view name="top"></router-view>
    </header>
    <div id="main">
      <aside>
        <router-view name="sidebar"></router-view>
      </aside>
      <section>
        <router-view name="main"></router-view>
      </section>
    </div>
    <footer>
      <router-view name="footer"></router-view>
    </footer>
  </div>
</template>

<style scoped>
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, footer {
  background-color: #eee;
  padding: 10px;
  text-align: center;
}

#main {
  display: flex;
  flex: 1;
}

aside {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
}

section {
  flex: 1;
  padding: 20px;
}
</style>

这样，我们就把整个后台管理系统的布局拆分成了多个组件，每个组件负责自己的部分，代码结构清晰，易于维护。

总结

命名视图是 Vue Router 里一个非常强大的特性，它可以让你轻松构建复杂的页面布局，提高代码的可维护性和可读性。记住，灵活运用命名视图、动态路由、路由守卫和 keep-alive，你的 Vue 应用将会更加强大！

希望今天的讲座对大家有所帮助，祝大家编程愉快！有问题可以随时提问，下次再见！

发表回复 取消回复

发表回复取消回复