javascript - Nuxt:销毁并重新创建当前页面的组件而不刷新
问题描述
我有一堆 Vue 组件,我使用 Nuxt 作为路由层。我的全局布局非常标准:
<template>
<nav>
<nuxt-link to="/foo">foo</nuxt-link> | <nuxt-link to="/bar">bar</nuxt-link> | etc.
</nav>
<main>
<nuxt />
</main>
</template>
在每个页面中,当 vuex 存储中的数据发生更改时,我都会更新查询字符串。如果页面是在服务器端加载的,我会解析查询字符串以将必要的数据预加载到存储中:
<template>
<h1>foo</h1>
<!-- forms and stuff -->
</template>
<script>
export default {
data() {
return {
// static data
}
},
computed: {
fooStoreParams() {
return this.$store.state.foo.params
}
},
watch: {
fooStoreParams: async function() {
await this.$nextTick()
let query = {}
if (this.fooStoreParams.page > 1) {
query.page = this.fooStoreParams.page
}
this.$router.push({ path: this.$route.path, query: query })
}
},
async asyncData({ store, query }) {
let params = {}
let data = {
form: {
page: 1
}
}
if (query.page) {
data.form.page = query.page
params.page = query.page
}
store.dispatch('foo/updateParams', params)
await store.dispatch('foo/getStuffFromAPI')
return data
}
}
</script>
这很好用,但是我缺少一个功能。
如果我已经打开/foo?page=2&a=1&b=2
并单击/foo
主导航中的链接,则不会发生任何事情。考虑到 Nuxt/vue-router 的工作原理,这是有道理的,但我想要从头开始重新加载页面组件(就像您已经导航 from 一样/bar
)/foo
。
我能想到的唯一方法是 1)<b-link href="/foo">
如果我已经在服务器端请求(例如),/foo?whatever
或者 2)为每个单独的页面编写一个resetPage()
方法。
有没有办法告诉 Nuxt 销毁并重新创建当前页面组件?
解决方案
您需要使用 watchQuery 来启用查询参数的客户端导航:
watchQuery: ['page', 'a', 'b']
推荐阅读
- android - 检索存储在 firebase 数据库中的 url 时,应用程序崩溃,出现错误无法将 java.lang.String 类型的对象转换为 android.net.Uri 类型
- python - tensorflow:inception v3 image_processing.py 中的评论对我来说毫无意义
- javascript - 对计算值求和
- bash - 使用 sleep 和 wait -n 在 bash 中实现简单的超时,竞争条件与否?
- javascript - 多个数据数组会影响性能吗?反应JS
- java - Spring boot 项目无法解析符号 SpringockitoContextLoader
- mql4 - MQL4 代码限制打开交易品种的数量
- performance - Kafka 分区影响性能
- c++ - 错误:在静态成员函数中无效使用成员 XXX
- selenium - Selenium Run 功能测试按测试时间分布