缓存路由组件
理解
默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
如果可以缓存路由组件对象, 可以提高用户体验
解决方式
给router-view添加key属性
<router-view :key="$route.fullPath"/> 复制代码
给router-view 添加key属性: 简单粗暴，类似于v-if：会销毁重建组件，有一定的性能损耗
使用watch监听id变化重新拉取接口
export default { name: 'TopCategory', components: { GoodsItem }, setup () { console.log('setup。。。。。。。。。。。。') // 轮播图 const sliders = ref([]) // findBanner().then(data => { // console.log('findBanner', data) // sliders.value = data.result // }) // 分类数据 const route = useRoute() const cate = ref({}) // findTopCategory(route.params.id).then(data => { // console.log('findTopCategory', data) // cate.value = data.result // }) // 监听 route.params.id的变化 // watch(对象 | 数组 | 函数, (newVal, oldVal) => {}, { immediate: true | false, deep: true | false }) watch(() => route.params.id, (newVal) => { console.log('route.params.id变化了...', newVal) findBanner().then(data => { console.log('findBanner', data) sliders.value = data.result }) findTopCategory(route.params.id).then(data => { console.log('findTopCategory', data) cate.value = data.result }) }, { immediate: true }) return { sliders, cate } } } </script> 复制代码watch( route.param.id): 没有销毁重建。从更底层的方式（侦听响应式数据的变化）去切入重发请求
使用
onBeforeRouteUpdate钩子函数
<script> import { onMounted, ref } from 'vue' import { findBanner } from '@/api/home.js' import { findTopCategory } from '@/api/category.js' import { useRoute, onBeforeRouteUpdate } from 'vue-router' import GoodsItem from './components/goods-item.vue' export default { name: 'TopCategory', components: { GoodsItem }, setup () { // 轮播图 const sliders = ref([]) // 分类数据 const route = useRoute() const cate = ref({}) const loadData = (id) => { findBanner().then(data => { console.log('findBanner', data) sliders.value = data.result }) findTopCategory(id).then(data => { console.log('findTopCategory', data) cate.value = data.result }) } // 只执行一次 onMounted(() => { loadData(route.params.id) }) // 路由变化时执行 // to： 要跳转的路由对象 onBeforeRouteUpdate((to) => { console.log('onBeforeRouteUpdate...............', to) loadData(to.params.id) }) return { sliders, cate } } } </script> 复制代码onBeforeRouteUpdate : 没有销毁重建。理解更加自然
作者：墨染灬
链接：https://juejin.cn/post/6986935526888587271