性能优化之解决路由缓存问题

什么路由缓存问题

1. 过时的路由信息：路由器缓存的路由信息如果没有及时更新，可能会导致数据包被错误地转发到过时或不可用的路径。

2. 缓存冲突：当多个路由条目相互冲突时，可能导致路由器选择错误的路径，从而影响数据流的顺畅性。

3. 缓存溢出：如果路由器的缓存空间不足，可能会导致新的路由信息无法存储，从而影响网络的稳定性和性能。

4. TTL（生存时间）问题：每个路由条目都有一个生存时间，如果TTL过期而未更新，可能会导致无效路由的使用。 

响应路由参数的变化 

使用带有参数的路由时，当用户进行导航栏切换时，相同的组件实例将会被重复使用。当两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

在Vue3中的解决方法 

 方案一：给router-view添加key

 

<RouterView :key="$route.fullPath"/>

问题：使用这种方案，当切换导航栏时，重复的组件会再次发送请求，造成资源浪费，使用方案二进行优化

 方案二：使用beforeRouteUpdate导航钩子

beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可，或者使用beforeRouteUpdate导航守卫，它可以取消导航：

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 对路由变化做出响应...
    this.userData = await fetchUser(to.params.id)
  },
}

实例： 

// 封装分类数据业务相关代码
import { onMounted, ref } from 'vue'
import { getCategoryAPI } from '@/apis/category'
import { useRoute } from 'vue-router'
import { onBeforeRouteUpdate } from 'vue-router'

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())

  // 目标:路由参数变化的时候 可以把分类数据接口重新发送
  onBeforeRouteUpdate((to) => {
    // 存在问题：使用最新的路由参数请求最新的分类数据
    getCategory(to.params.id)
  })
  return {
    categoryData
  }
}