vue3，动态引入组件，同时动态设置组件的name，用于keep-alive缓存-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3，动态引入组件，同时动态设置组件的name，用于keep-alive缓存。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如果有两个页面逻辑大都相同，咱们想到的第一个肯定是写一个组件，然后两个路由都指向这个组件。
那如果现在多添加一个需求：两个页面在切换路由时都需要缓存数据，并且两个页面的缓存数据要求独立。
这个需求很简单：在router-view外层包裹一个keep-alive组件，指定缓存名称即可。

OK，有了需求，问题出现：
因为keep-alive是根据组件的name来指定缓存策略的，两个路由用的同一个component，他们的name是相同的，这样导致两个页面的数据不能独立缓存，他们会共用缓存数据

so,咱们有了又有了新的想法：能否动态的设置component的name,引用同一个组件设置不同的name。
相信这也是大家能搜到我这篇文章的原因，嘿嘿。

答案肯定的


//生产打包，需要vite引入模块
const viewsComponent = import.meta.glob('/src/views/**/*.vue')
//实际的组件路径
const componentPath= '/src/views/test.vue'
//自定义组件name
const componentName = 'woshipipixia'
//构造动态路由
const dynamicRoute = {
  name: 'test',
  path: 'test',
  component: () => {
    //根据组件路径动态获取组件实例
    const component = viewsComponent[componentPath]
    if (!component) throw new Error(`${componentPath} 组件文件不存在！`)
    //重新构造组件，调整组件name
    return component().then(comp => ({
      ...comp.default,
      name: componentName,
    }))
  }
}
//添加路由
router.addRoute(dynamicRoute)