目录
解决问题的思路:
解决问题的方案:
1、给roter-view添加key(破坏复用机制,强制销毁重建)
2、使用beforeRouteUpdate导航钩子
3、使用watch监听路由
vue3路由缓存:当用户从/users/johnny导航到/users/jolyne时,相同的组件实例被重复使用。由于两个路由都渲染相同的组件,比起销毁再创建,复用是比较高效的,但是这也会导致组件的生命周期狗子不会被调用
根据小兔鲜项目进行代码编辑。
解决问题的思路:
1、让组件实例不复用,强制销毁重建
2、监听路由变化,变化之后执行数据更新
解决问题的方案:
1、给roter-view添加key(破坏复用机制,强制销毁重建)
当前路由完整路径为key的值,给router-view组件绑定
方法一:添加一个Key 破坏复用机制 强制销毁重建 太过粗暴 所有的都销毁重建
<RouterView :key='$route.fullPath' />
2、使用beforeRouteUpdate导航钩子
beforeRouteUpdate:是生命周期钩子,在组件的任何响应式依赖发生变化之前被调用。这不仅仅是针对路由的,也包括其他的响应式数据。
beforeRouteUpdate:更为一般,任何响应式数据的变化都会触发这个钩子。如果你使用它来监听路由变化,你需要自己判断路由是否真的发生了变化
beforeRouteUpdate:因为它响应组件内任何数据的变化,所以可能会在很多情况下被触发。但是,只要你避免在这个钩子里执行计算密集或昂贵的操作,性能影响应该是可以接受的
// 封装category相关的业务代码
import { getCategoryAPI } from "@/apis/category";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
export function useCategory() {
// 获取数据
const categoryData = ref({});
const route = useRoute();
const getCategory = async (id = route.params.id) => {
const res = await getCategoryAPI(id);
categoryData.value = res.result;
};
onMounted(() => {
getCategory(route.params.id);
});
// 目标:路由参数变化的时候,可以把分类数据接口重新发送
onBeforeRouteUpdate((to) => {
//console.log(to); //to代表目标路由对象
// 存在问题:使用最新的路由参数请求最新的分类数据
getCategory(to.params.id);
});
return {
categoryData,
};
}
在index.vue中引入使用
import { useCategory } from "@/views/Category/composables/useCategory";
const { categoryData } = useCategory();
3、使用watch监听路由
watch
:通常用于监听某个特定的响应式引用或响应式对象的变化,并在这些变化时执行某些操作
watch
:更为专一,只在所监听的响应式数据发生变化时执行。对于路由监听,它允许你精确地知道什么时候路由发生了变化,并提供了新旧值
watch
:由于它只响应特定的数据变化,因此性能开销通常较小
在category中使用watch监听
// 封装category相关的业务代码
import { getCategoryAPI } from "@/apis/category";
import { useRoute } from "vue-router";
import { ref, onMounted, watch } from "vue";
export function useCategory() {
// 获取数据
const categoryData = ref({});
const route = useRoute();
const getCategory = async (id = route.params.id) => {
const res = await getCategoryAPI(id);
categoryData.value = res.result;
};
onMounted(() => {
getCategory(route.params.id);
});
watch(
() => route.params.id,
(newValue, oldValue) => {
// console.log(route, newValue, oldValue);
if (newValue && route.path == `/category/${newValue}`) {
//需要保证在跳转到的路由是咱们的目标路由时才请求分类的数据
getCategory(newValue);
}
},
{ deep: true }
);
return {
categoryData,
};
}
可根据场景需要使用这三种方法
1、如果你只关心路由的变化,并且需要新旧值,适用于在组件更新之后处理路由变化的情况,使用 watch
可能更合适
2、如果你希望在组件更新之前被调用,适用于需要在组件渲染之前获取最新数据的场景,无论是路由还是其他数据,那么 beforeRouteUpdate更为适合
3、不在意性能问题,选择key,简单粗暴
如果只是为了监听路由变化,watch
可能更为适合,因为它提供了更精确的控制和明确的新旧值。而 beforeRouteUpdate更适用于在组件的任何数据变化之前执行操作的情况。不在意性能问题,选择key,简单粗暴文章来源:https://www.toymoban.com/news/detail-654429.html
若有问题,可以留言~ :)文章来源地址https://www.toymoban.com/news/detail-654429.html
到了这里,关于vue3 路由缓存问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!