最近遇到一种情况，一个页面内的某一部分，需要根据路由来判断应该显示哪一部分，而这一部分动态显示的内容又可能是基于多人开发的情况。

因为不想在一个页面内每次都去添加 if 判断，然后想到了一种实现思路，就是把这部分动态内容作为动态引入的组件，这样应该是可以达到目的的，只需要不同的开发人员按照一定规则去组织各自的文件即可。这样不仅简化了这个页面，而且使得大家互不影响。下面简单贴一下大概的实现思路相关代码（代码写的很潦草，只是一个验证可行性的简单示例，还望不要吐槽我的代码写的烂）。

【】请勿吐槽我的代码写的烂，这只是一个临时的验证方案可行性的简单代码示例，并没有太仔细的归置代码。实际工作中我会尽量规范我的代码的！

增加一个页面的路由，其中子路由是一个动态path。

{  path: '/test',  name: 'test',  meta: { title: 'Test', hideChildrenInMenu: true },  // 此处可以默认重定向到一个已有的默认组件  redirect: '/test/card',  component: RouterView,  children: [    {      path: '/test/:type',      name: 'test.detail',      meta: { title: 'Test_Detail' },      // 此处声明props:true，path的动态参数:type便可以直接在页面中的props中获取到      props: true,      component: () => import('@/views/test/index.vue'),    },  ],},

<template>  <Card :loading="loading">    <h2>下面是测试页面根据路由动态显示的部分</h2>    <Empty v-if="!detail" />    <component v-else :is="detail" />  </Card></template><script>import { Card, Empty } from 'ant-design-vue';import { markRaw } from 'vue';export default {  name: 'TestCustomComponent',  components: { Card, Empty },  props: {    // 此处的type与路由动态path的动态参数名一致，即可接收到其动态参数    type: {      type: String,    },  },  data() {    return {      detail: '',      loading: true,    };  },  mounted() {    this.getDetail();  },  methods: {    getDetail() {      if (!this.type) {        this.loading = false;        this.detail = false;        return false;      }      this.loading = true;      setTimeout(async () => {        try {          // 获取动态组件          const customComponent = await this.getCom();          // 判断如果获取到动态组件，则将其使用markRaw函数包裹后赋值给页面          // 如果不使用markRaw函数包裹获取到的组件，则控制台会有vue警告输出          this.detail = customComponent?.default && markRaw(customComponent?.default);        } finally {          this.loading = false;        }      }, 1000);    },    // 使用 import() 函数动态加载组件    async getCom() {      return await import(`@/views/testComponents/${this.type}/index.vue`);    },  },};</script><style scoped lang="less"></style>

基于上面的规则，不同的人员只需要按照规则，在 @/views/testComponents 下创建相应动态路由的type参数名的文件夹，然后创建一个 index.vue 文件即可。

到此基本就可以达到目的了。但比较粗糙，还有很多细节没有处理，比如：如果根据传入的type值找不到相应的文件时应该怎么处理更合适？在上面的例子中仅是简单的使用了antdvue的Empty组件，具体开发过程中可以根据实际需要做出更友好的提示。