大家好，我正在尝试在我的 nuxt js 应用程序中观看路线变化。
这是我的中间件：
export default function ({ route }) {
return route; but i don't know what to write here
}
索引.vue 文件
middleware: [routeReact]
我正在尝试写这个：
app.context.route = route
但它告诉我 app.context 不存在
这是我的问题的重点，如果路线发生变化，我正在尝试使用页面上的 axios 更新从我的 api 获取的数据 像这样
this the page
我点击链接到下一页：
但是当我转到下一页时，没有任何反应，所有数据都是相同的：
这是我的 asyncData 代码：
asyncData({ app }) {
return app.$axios.$get('apps/' + app.context.route.fullPath.replace(/\/categories\/?/, ''))
.then(res => {
return {
info: res.results,
nextPage: res.next,
prevPage: res.prev
};
})
}
感谢您的帮助
首先，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重新渲染页面，从而调用中间件和钩子。对于切换同一页面组件的动态路由时触发转换也很有用。