重新加载Spa工程中的Vue组件

Question

所以我正在用vue js创建spa应用程序，我有这些路线

{ path: '/artikel/create',name: 'artikelCreate', components: { default: artikel_form, 'header': header} },
{ path: '/artikel/edit/:id',name: 'artikelEdit', components: { default: artikel_form, 'header': header}, meta: { mode:'edit' } },

有artikelCreate路由从artikel_form组件创建空白表单，还有artikelEdit路由根据:id创建具有数据的表单。 他们两个都使用相同的组件artikel_form

我正在创建它，所以我不需要创建具有几乎相同的2个表单组件。 我只是使用if(this.$route.meta.mode === 'edit')来确定这条路线是artikelEdit还是artikelCreate并根据该信息执行一些方法。

它工作得很好，但是随后通过执行此步骤，我遇到了一些问题：

1. 如果我走到artikelEdit路线，它将在每个输入和其他内容的数据旁边创建artikel_form组件
2. 但是因为我有一个导航栏，所以我可以从artikelEdit路线访问或导航到artikelCreate路线，并且如果我单击/导航到这些路线，它应该创建一个空的artikel_form
3. 问题是路线改变，但它并没有创建一个空的artikel_form它仍然显示artikel_form从artikelEdit路线

那么如何重置或重新创建这些组件呢？ 我知道，我可以制作一个v-model并清理这些v-model但有时内部有些组件只需要额外的步骤，而不仅仅是清理绑定到表单上input text v-model 。 而且由于我们需要指定每一个，它也容易出错。

有什么优雅的方法可以在Vue中调用重新加载或刷新或重新创建组件吗？

Answer 1

这是因为Vue认为它是相同的组件（相同的对象引用），因此即使更改路线，该组件仍指向相同的引用，因此Vue不会重新加载该组件。

因此，我们需要克隆artikel_form，以便它们具有不同的引用。 我们可以使用对象传播算子

{
    path: '/artikel/create',
    name: 'artikelCreate',
    components: {
        default: {...artikel_form},
        'header': header
    }
},
{
    path: '/artikel/edit/:id',
    name: 'artikelEdit',
    components: {
        default: {...artikel_form},
        'header': header
    },
    meta: {
        mode:'edit'
    }
},