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

【问题标题】：Reload vue component in spa project在 spa 项目中重新加载 vue 组件
【发布时间】：2018-03-05 14:17:54
【问题描述】：

所以我正在使用 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
问题是路线正在改变，但它没有创建一个空的artikel_form 它仍然显示来自artikelEdit 路线的artikel_form

那么如何重置或重新创建这些组件？我知道，我可以只创建一个v-model 并清理那些v-model，但有时里面的某些组件只需要额外的步骤，而不是简单地清理与表单上的input text 绑定的v-model。而且它也容易出错，因为我们需要指定每一个。

是否有任何优雅的方式来调用 vue 中的 reload 或 refresh 或重新创建组件？

【问题讨论】：

您好，要对同一组件中的参数更改做出反应，您可以简单地观察$route 对象。你可以看看docs

标签： javascript vue.js

【解决方案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'
    }
},

【讨论】：