首先,context.route
或者它的别名this.$route
是不可变对象,不应赋值。
相反,我们应该使用this.$router
这是程序化导航方法 https://router.vuejs.org/guide/essentials/navigation.html or <nuxt-link>
and <router-link>
.
据我了解,您需要渲染相同的路线,但触发asyncData
钩子以更新组件的数据。仅更改路由查询。
导航到同一页面但具有不同数据的正确方法是使用以下格式的链接:
<nuxt-link :to="{ name: 'index', query: { start: 420 }}"
然后你可以使用 nuxt 提供的选项手表查询 https://nuxtjs.org/api/pages-watchquery在页面组件上并访问内部的查询asyncData
如下:
watchQuery: true,
asyncData ({ query, app }) {
const { start } = query
const queryString = start ? `?start=${start}` : ''
return app.$axios.$get(`apps/${queryString}`)
.then(res => {
return {
info: res.results,
nextPage: res.next,
prevPage: res.prev
}
})
},
此选项不需要使用middleware
。如果你想坚持使用中间件功能,你可以添加一个key
到所使用的布局或页面视图。这是添加一个的示例key
到默认布局:
<nuxt :key="$route.fullPath" />
这将迫使nuxt
重新渲染页面,从而调用中间件和钩子。对于切换同一页面组件的动态路由时触发转换也很有用。