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

所以我正在用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\u表单

组件创建空白表单，还有一个

artikelEdit

路由可以根据

：id

创建包含数据的表单。它们都使用相同的组件，即

artikel_形式

我就是这样创建的，所以我不需要创建两个几乎相同的表单组件。我只需要使用

if（this.$route.meta.mode==='edit'）

来确定这个路由是

artikelEdit

还是

artikelecreate

，并根据这些信息执行一些方法

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

如果我转到

artikelEdit

route，它将在每个输入和其他内容的数据旁边创建

artikel_表单

组件

但是因为我有一个导航栏，所以我可以从

artikelEdit

路径访问或导航到

artikecreate

路径，如果我单击/导航到这些路径，它应该会创建一个空的

artikel\u表单

问题是路线正在更改，但它没有创建空的

artikel_表单

它仍然显示

artikel_表单

自

artikelEdit

路线

那么，如何重置或重新创建这些组件呢？我知道，我可以制作一个

v-model

并清洁那些

v-model

，但有时内部有些组件需要额外的步骤，而不仅仅是清洁

v-model

，该组件绑定到表单上的

输入文本。而且它也容易出错，因为我们需要指定每一个

在vue中调用重载、刷新或重新创建组件有什么优雅的方法吗？
这是因为vue认为它是同一个组件（相同的对象引用），所以即使路由更改，组件仍然指向相同的引用，所以vue不会重新加载组件

因此，我们需要克隆artikel_形式，以便它们具有不同的引用。
我们可以使用

您好，要对同一组件中的参数更改做出反应，只需查看
$route
对象即可。你可以去图书馆看看
{
    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'
    }
},