重新加載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'
    }
},