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

马文庆i
  • 10

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

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

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

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

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

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

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

例子1
例子2

你知道吗?

宣传栏