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

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

我们使用 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'
    }
  },
}
回复
阅读 9.7k
7 个回答

遇到相同的问题请教大佬后得知:
可以把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>

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

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

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

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

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

例子1
例子2

新手上路,请多包涵
{
  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
    },
  }
}
新手上路,请多包涵

只是页面组件和路由信息绑定的话,这个方法简单点,但是这个只能在加载组件时修改一次

function registerComponentName(componentName, component) {
  return () => {
    return component().then(res => {
      res.default.name = componentName
      return res
    })
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏