问题描述:
公司近期对官网进行了重构,采用SSR服务端渲染的方式,使用Nuxt.js框架(vue2),在部分页面因为只有路由携带的参数发生了改变,如下:
old:
http://localhost:3000/solutionPage?id=26&index=4
new:
http://localhost:3000/solutionPage?id=25&index=2
在这里面只有query的参数发生了改变,但是页面没有变化,此时刷新浏览器页面才会变成新的,显然每次跳转后手动刷新页面,用户使用效果极差,所以需要做出调整。
问题处理:
进行路由监听,路由发生变化时使用JavaScript的方法自动刷新浏览器
watch: {
'$route'(to, from) {
if (to.query.id != from.query.id || to.query.index != from.query.index) {
window.location.reload();
}
}
}
或者使用Nuxt.js组件的钩子函数方法对路由进行监听(博主并没有使用过)
Nuxt 2 - The watchQuery Property
watchQuery: {
handler(newQuery, oldQuery) {
if (newQuery.foo && !newQuery.bar) {
// 在这里执行你希望在参数变化时执行的逻辑操作
console.log('URL 查询参数发生变化:', newQuery);
// 这里可以调用你的方法或者更新数据等操作
}
},
deep: true, // 深度监听对象内部值的变化
immediate: true // 在组件创建时立即执行一次
}