[JavaScript知识库]如何解决路由组件的缓存问题

路由地址变化了： http://localhost:8080/#/category/1013001? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?http://localhost:8080/#/category/1013321

但内容并没有更新，因为这两个地址匹配的都是同一个组件，这个组件在路由切换的过程中，组件并没有重新销毁(重新生成)

解决方案：

1）给router-view?路由出口处添加key属性

<router-view :key="$route.fullPath"/> 

// key：平时是在 V-for 中使用?

// key：这里作用是判断虚拟dom(组件)是否要销毁重建
// :key="$route.fullPath" 这种方式就好比是V-if

Vue?的工作原理：?数据的变化就会导致视图的变化

• render函数(数据1)???===?虚拟dom1
• render函数(数据2)???===?虚拟dom2

Vue会比较?虚拟dom1 与?虚拟dom2的区别（diff算法）,然后决定是否要更新页面（更新哪些部分）

key在diff算法工作时，用来比对?虚拟dom1?虚拟dom2是否相同，

• 如果key相同，可能不需要
• 如果key不同，就一定h会更新

2）使用watch监听id变化重新拉取接口 ?

监听 route.params.id的变化

watch(对象 | 数组 | 函数, (newVal, oldVal) => {}, { immediate: true | false, deep: true | false })?

• ? immediate：是否立即执行
• ? deep：深度监听

  watch(()=>route.params.id,(newVal)=>{
    //在watch里面重发请求
  },{immediate:true})

?3）使用onBeforeRouteUpdate 钩子函数

<script>
import { onMounted, ref } from 'vue'
import { findTopCategory } from '@/api/category.js'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'


export default {

  setup () {

    // 分类数据
    const route = useRoute()
    const cate = ref({})

    const loadData = (id) => {
      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>