打印日志,发现vue中的route.beforeEach方法执行了,from和to指向了同样的页面。 因为Vue Router默认认为带有相同名称的路由是同一个页面,不会重新加载组件,除非整个路由路径改变。为了解决这个问题,你可以这样做:
使用key属性强制组件重新渲染
在你的/cart页面组件上,可以利用:key属性来强制Vue识别为一个新的组件实例,从而重新渲染。你可以将:key绑定到一个能够反映页面状态(如查询参数)的值上。
vue
<!-- CartPage.vue -->
<template>
<div :key="cartKey">
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
computed: {
cartKey() {
// 使用timestamp作为key的一部分,确保当timestamp变化时,key也变化
return `cart-${this.$route.query.timestamp}`;
},
},
// ... 其他逻辑 ...
};
</script>
这样,每当timestamp查询参数变化时,Vue会认为这是一个全新的组件,从而重新渲染页面并触发数据的获取。