Vue3动态组件加载的具体实现过程（附带实例）

Vue 中，除了利用路由插件来实现页面切换，其本身还内置了动态组件，下面分 4 步来实现一个动态组件的加载。

1) 利用 vite 创建一个路由项目，这里将项目的名称设置为“vue3-book-router”。在 cmd 终端中执行下方命令：

npm create vite@latest vue3-book-router -- --template vue

2) 为了后续项目的页面优化，这里可以考虑引入 bootstrap 的样式内容。只需在项目根目录的主页面“index.html”中引入 bootstrap 的 CDN 地址即可，这里引入的版本为 5.1.3。

bootstrap 的 CDN 地址可以在其官方网站中查找指定版本的 CDN 资源。

index.html 文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <title>vue-router</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

3) 将 App.vue 文件中的代码内容全部删除，并将 components 目录与文件一同删除。新建页面目录 views，在该目录下新建 Home.vue 与 Users.vue两个页面文件。

views/Home.vue 文件代码如下：

<template>
  <div>首页</div>
</template>

views/Users.vue 文件代码如下：

<template>
  <div>用户页</div>
</template>

此时，文件目录结构如下图所示：

图 1 文件目录结构

4) 在 App.vue 根组件文件中尝试引入 Home.vue 与 Users.vue 这两个页面文件，并在根组件文件中放置两个按钮。希望在点击按钮时，实现首页与用户页的切换操作。

在引入 Home.vue 与 Users.vue 两个页面文件以后，先声明一个响应式数据 selectPage，用于存放被选中的页面，并且定义一个切换页面的方法 changePage，该方法的目标就是将 selectPage 这个响应式数据的值修改成被选中的页面。当然，为了让页面默认显示首页，可以进行方法的初始化调用操作。

而在模板渲染部分，则可以放置两个按钮，这两个按钮的功能就是点击触发页面切换，切换的内容就是 Home 与 Users 这两个页面组件。

那么被选中的页面最终在哪里显示呢？可以利用 Vue 的内置组件 Component 进行占位渲染，它有一个属性 is，其值代表渲染的内容，而现在这个值则为响应式数据 selectPage 的内容。

此时 App.vue 文件代码如下：

<script setup>
import Home from './views/Home.vue'; // 引入首页
import Users from './views/Users.vue'; // 引入用户页
import { ref, markRaw } from 'vue';
const selectPage = ref(null); // 设置选中组件的 ref 对象

// 定义切换页面的方法
function changePage(page) {
  // 注意：通过markRaw 函数指定不对 page 组件本身进行响应处理
  selectPage.value = markRaw(page);
}

// 初始化默认页面为首页
changePage(Home);
</script>

<template>
  <div class="container">
    <button class="btn btn-secondary" @click="changePage(Home)">
      切换到首页
    </button>
    &nbsp;
    <button class="btn btn-secondary" @click="changePage(Users)">
      切换到用户页
    </button>
    <hr>
    <!-- 利用动态组件加载，动态显示用户切换的页面内容 -->
    <component :is="selectPage"></component>
  </div>
</template>

这样，我们就可以通过“npm run dev”命令运行项目进行测试。读者可以发现，在默认情况下，页面显示了首页的内容，如下图所示：

图 2 默认页面

当点击“切换到用户页”按钮时，则会显示用户页的内容，如下图所示。

图 3 切换后的页面

到目前为止，利用动态组件加载的方式可以实现页面之间的切换，从实现效果上来说是没有任何问题的，但随着项目功能的增加，页面数量将急剧增加，动态组件加载方式会存在一定的局限。

比如，对于两个页面之间的数据传递、设置嵌套页面等常见操作，利用动态组件加载是不容易处理的。也正是因为这些局限，才需要利用 VueRouter 插件来实现更好的页面切换和维护操作。

Vue3动态组件加载的具体实现过程（附带实例）

相关文章