Question

当前，在我的Vue路由器中，我有很多路由如下：

    {
      path: '/somepath',
      name: 'SomeName',
      components:{
        componentA: componentA,   
        componentB: componentB,   
        body: Body1,  
        componentC: componentC,  
        componentD: componentD
      },
    },
    {
      path: '/somepath2',
      name: 'SomeName2',
      components:{
        componentA: componentA,   
        componentB: componentB,   
        body: Body2,  
        componentC: componentC,  
        componentD: componentD
      },
    },

在我的App.vue中，我有这个

    <router-view name="componentA"></router-view>
    <router-view name="componentB"></router-view>
    <router-view name="body"/>
    <router-view name="componentC"></router-view>
    <router-view name="componentD"></router-view>

有很多重复项，因为几乎每个路径都包含A，B，C，D分量。当我使用嵌套路线并且孩子也有A，B，C和D时，情况更糟。

其他路径仅包含A和D。

需要改进吗？如果是，那么还有什么更好的方法来解决此问题，或者有什么方法可以对组件进行分组，所以我只需要调用一次？谢谢。

编辑：我尝试了@David的答案。如果执行此操作，方法makeRoute将起作用：

const makeRoute = ({ path, name, pcbody, spbody }) => ({
  path,
  name,
  components: {
    componentA: componentA,
    componentB: componentB,
    pcbody,
    componentC: componentC,
    componentD: componentD,
  },
});

但commonComponents部分无效。 App.vue似乎不知道哪个组件与路由器视图一起使用，而这些组件未显示在页面上

Answer 1

您可以像这样重构您的示例：

const commonComponents = {
  componentA,
  componentB,
  componentC,
  componentD,
};

const routes = [
  {
    path: '/path1',
    name: 'Path1',
    components: { ...commonComponents, body: Body1 },
  },
  {
    path: '/path2',
    name: 'Path2',
    components: { ...commonComponents, body: Body2 },
  },
];

如果您发现大多数/所有路线都具有相同的模式，则可以想象将其重构得更多：

const commonComponents = {
  componentA,
  componentB,
  componentC,
  componentD,
};

const makeRoute = ({ path, name, body }) => ({
  path,
  name,
  components: { ...commonComponents, body },
});

const routes = [
  makeRoute({ path: '/path1', name: 'Path1', body: Body1 }),
  makeRoute({ path: '/path2', name: 'Path2', body: Body2 }),
];

如何在vuejs中对组件进行分组？

1 个答案: