Javascript Nuxt：销毁并重新创建当前页面'；在不刷新的情况下删除组件

我有一堆Vue组件，我使用Nuxt作为路由层。我的全局布局非常标准：

福巴等。

在每个页面中，当vuex存储区中的数据发生更改时，我都会更新查询字符串。如果页面是在服务器端加载的，我将解析查询字符串以将必要的数据预加载到存储中：

福
导出默认值{
数据（）{
返回{
//静态数据
}
},
计算：{
fooStoreParams（）{
返回此。$store.state.foo.params
}
},
观察：{
fooStoreParams:async函数（）{
等待此消息。$nextTick（）
让查询={}
如果（this.fooStoreParams.page>1）{
query.page=this.fooStoreParams.page
}
this.$router.push（{path:this.$route.path，query:query}）
}
},
异步数据（{store，query}）{
设params={}
让数据={
表格：{
页码：1
}
}
if（query.page）{
data.form.page=query.page
params.page=query.page
}
store.dispatch（'foo/updateParams'，params）
等待store.dispatch（'foo/getStuffFromAPI'）
返回数据
}
}

这很好用，但我缺少一个功能

如果我已经在

/foo？page=2&a=1&b=2

上，并单击主导航中的

/foo

链接，则不会发生任何事情。考虑到Nuxt/vue路由器的工作方式，这是有道理的，但我希望页面组件从头开始重新加载（就像您从

/bar

导航到

/foo

）

我能想到的唯一方法是：1）如果我已经在

/foo？上，则执行服务器端请求（例如
），无论什么
，或者2）为每个页面编写
重置页面（）
方法

有没有办法告诉Nuxt销毁并重新创建当前页面组件？
您需要使用watchQuery来启用查询参数的客户端导航：

watchQuery: ['page', 'a', 'b']

如果您有一个组件，例如

<titlebar :key="somekey" />



somekey的值会更改组件的重新渲染。你也许可以围绕这一点来实现你想要的。阅读此处的更多信息：
这实际上在我的页面上创建了一个无限循环，因为我在
asyncData
中解析查询字符串，这会触发我的
watch
，更新查询字符串，等等。