如何给VUE组件动态生成name？

Question

项目中遇到得问题是切换 列表->详情->列表 时候，不让刷新。列表不刷新，详情也不刷新。

我们使用 keepalive 保证缓存。但是新的问题出现了。

有多个列表菜单，listA -> detailA , listB -> detailB 由于 detailA 与 detailB 基本类似，则detail为公用组件。

但是现在因为缓存问题，我需要给 detail 命名 name， 缓存是通过 name 来找得，但是 由于公用问题，命名必须保证唯一，

我想到的就是将 detail 文件复制出来，成为 detailA 和 detailB， 但是项目中有六七个页面公用组件得现象。

能否将 detail 得 name 设置成动态得，这样减少代码重复与工作量

求教大神，这种情况下怎么弄？

  {
    path: 'a/detail',
    name: 'detail',
    component: () => import('../views/Page/detail.vue'),
    meta: { title: '机构详情',},
  },
  {
    path: 'b/detail2',
    name: 'detail2',
    component: () => import('../views/Page/detail.vue'),
    meta: { title: '机构详情',},
  },

两个路由，但是是公用得同一个组件。
在这个组件中我只能写一个 name 这样就不能查找到对应得东西了

// 组件中name 我只能写一个，如何才能写多个，或者写成动态
export default {
  name: 'detail',
  data() {
    return {
      msg：'111'
    }
  },
}

Answer 1

遇到相同的问题请教大佬后得知：
可以把detail整体封装成一个组件，然后在detailA和detailB的路由组件中分别引入，这样detailA和detailB就可以使用不同的name值了。解决方案和楼主类似，但至少修改的时候省点事

// detailA或者detailB的路由组件
<template>
  <detail></detail>
</template>
<script>
import detail from '@/components/common/detail.vue';
export default {
  name: 'detailA,
  components: {
    detail,
  },
};
</script>

Answer 2

你这写得估计只有自己看得懂。。。
如果是使用的时候重命名的话只需要重新声明一个变量就行了：

import Name from 'xxx.vue';
const NewName = Name;

或者在注册组件的时候重命名：

import Name from 'xxx.vue';
{
  components: {
    NewName: Name 
  }
}

Answer 3

手动控制keep-alive的缓存策略，用路由信息代替name作为唯一标识

例子1
例子2

Answer 4

{
  path: '/dashboard/analysis',
  name: 'Analysis1',
  component: createCustomComponent('Analysis1', import('@/views/dashboard/Analysis')),
  meta: {
    title: '分析页'
  },
}

/**
 * 将指定组件设置自定义名称
 *
 * @param {String} name 组件自定义名称
 * @param {Component | Promise<Component>} component
 * @return {Component}
 */
export function createCustomComponent (name, component) {
  return {
    name,
    data () {
      return { component: null }
    },
    async created () {
      if (component instanceof Promise) {
        try {
          const module = await component
          this.component = module?.default
        } catch (error) {
          console.error(`can not resolve component ${name}, error:`, error)
        }

        return
      }
      this.component = component
    },
    render (h) {
      return this.component ? h(this.component) : null
    },
  }
}

Answer 5

遇到同样的问题 请问解决了吗

Answer 6

同求此问题，请问解决了吗