问题描述:
公司近期对官网进行了重构,采用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组件的钩子函数方法对路由进行监听(博主并没有使用过)