本文主要是介绍Vue中路由到一个公共组件，然后根据路径中是否存在文件动态加载组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这个需求咋这么奇怪呢？这个需求想让一个组件完成默认兜底的功能，比如某个产品的显示，然后又留出定制化的功能，直接在固定的路径中编写vue，而不用再次定义路由。哎，写到这里，感觉再手动定制下路由就可以了。

1、实现多个路由1个组件

这个直接定义即可，我使用的是 vue-element-admin，因此定义的路由如下：
这里使用import，webpackage可以支持动态载入组件，当然直接引入组件也是可以的。

{
    path: '/test',
    component: Layout,
    hidden: false,   
    meta: { title: 'test', icon: 'dashboard' },
    children: [{
      path: 'testa',
      name: 'testa',
      component: () => import('@/views/common/index'),
      meta: { title: 'test1', icon: 'dashboard' }
    },
    {
      path: 'testb',
      name: 'testb',
      component: () => import('@/views/common/index'),
      meta: { title: 'test2', icon: 'dashboard' }
    }
  ]
  },

经测试，其实例是不同的，每次切换都可以出发created()方法。

2、实现根据路径动态载入组件的显示

这里使用vue的component组件功能进行实现。
模板的定义如下：

<div class="block">    
        <keep-alive v-if="realCompoonent">
            <component :is= "realCompoonent" ></component>
        </keep-alive>  
    </div>

我们使用v-if来判断是否需要显示组件。

在下面的动态加载组件时，遇到了问题，因为webpackage的限制，其import无法使用变量，当然有网友说可以采用模板字符串方法，使前半段路径固定，当然这个方式是极不友好的，因此我们使用require来完成加载的功能。

• 要点1：如果没有文件，则用try catch搂住，
• 要点2： require获取的不是组件，会得到 错误 Failed to mount component: template or render function not defined.

init(){
      var path = this.$route.fullPath
       try{          
           this.realCompoonent =  require(`@/views${path}`)
       }
       catch(ex){
           console.log(`load sub com [${path}] failed. ${ex}`)
           this.realCompoonent = null
       }
   }  

• 改进require，使用 .default

 this.realCompoonent =  require(`@/views${path}`).default

再次测试：OK。
看下截图效果：

这里testa增加了组件定义，因此， 点击test1可以显示出来testa的组件。

3、 应用

暂时需要应用到某些公司的自定义页面上，当然没有完全结束，最好能够从后台返回.vue文件，然后加载更好了~~~~,当然还需要进一步努力!

应该也可以应用到普通的增删改查之类的，定义一个兜底文件，然后再二次开发扩展。

前端之路漫漫，吾将上下而求索！

关注我，一块进步！

这篇关于Vue中路由到一个公共组件，然后根据路径中是否存在文件动态加载组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！