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，并根据该信息执行一些方法。

它运作得很好但是我通过这一步面临一些问题：

如果我转到artikelEdit路线，那么它会在每个输入和其他内容的数据旁边创建artikel_form组件
但是因为我有一个导航栏，我可以从artikelEdit路由访问或导航到artikelCreate路由，如果我点击/导航到这些路线，它应该创建一个空的artikel_form < / LI>
问题是路线正在发生变化，但它没有创建一个空的artikel_form，它仍显示artikel_form路线中的artikelEdit

那么如何重置或重新创建这些组件呢？我知道，我可以制作一个v-model并清理那些v-model但有时候里面有一些组件需要额外的步骤，而不仅仅是清除与v-model相关联的input text表格。它也容易出错，因为我们需要指定每一个。

是否有任何优雅的方法可以在vue中调用重新加载或刷新或重新创建组件？

Answer 1

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

因此，我们需要克隆artikel_form，以便它们具有不同的引用。我们可以使用object spread operator

{
    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'
    }
},

在spa项目中重新加载vue组件

1 个答案: