vue3单页面内组件复用页面数据不能更新的问题解决方法

解决方法

import { onBeforeRouteUpdate } from "vue-router"

import { onBeforeRouteUpdate } from "vue-router";
onBeforeRouteUpdate(to => {
      console.log(to, "路由变动");
});
//to：目标路由对象

业务需要对不同页面的组件进行路由跳转，相同的组件实例将会被复用。因为这些路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过这也意味着组件的生命周期钩子不会被调用。

onBeforeRouteUpdate可以在组件复用前执行。因此可以更新所需数据。

举个例子

//一进入页面就需要获取goodList，调用getGoodList。
const getGoodList = async () => {
  const res = await getGoodListAPI();
  goodList.value = res.result;
};

//钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码
onMounted(() => getGoodList());

//因为不需要重新渲染页面，所以onMounted不会再次调用。
//所以用onBeforeRouteUpdate再次调用getGoodList获取数据。
//可以理解为一个监听器。
onBeforeRouteUpdate((to) => {
  getGoodList();
});