大家好,我正在尝试在我的 nuxt js 应用程序中观察路线变化。
这是我的中间件:
export default function ({ route }) {
return route; but i don't know what to write here
}
index.vue 文件
middleware: [routeReact]
我正在尝试写这个:
app.context.route = route
但它对我说 app.context 不存在
这是我的问题的要点,如果路由更改,我正在尝试使用页面上的 axios 更新从我的 api 获取的数据 像这样
我正在点击链接到下一页:
但是当我转到下一页时,没有任何反应所有数据都是相同的:
这里是我的 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
是不可变对象(immutable对象),不应为其分配值。
相反,我们应该使用 this.$router
它是 methods for programmatic navigation或 <nuxt-link>
和 <router-link>
.
据我了解,您需要呈现相同的路线,但会触发 asyncData
Hook 以更新组件的数据。仅更改路由查询。
导航到同一页面但具有不同数据的正确方法是使用这种格式的链接:
<nuxt-link :to="{ name: 'index', query: { start: 420 }}"
然后你可以使用nuxt提供的选项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
到使用的布局或页面 View 。这是添加 key
的示例默认布局:
<nuxt :key="$route.fullPath" />
这将强制 nuxt
重新呈现页面,从而调用中间件和 Hook 。在切换同一页面组件的动态路由时,它对于触发转换也很有用。
关于vue.js - 如何使用 Nuxt 和 asyncData 观察路由变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52874435/