路由跳转(同个组件)-路由守卫

import { ref, onMounted } from 'vue'
import { getTopCategoryAPI } from '@/api/category'
import { useRoute } from 'vue-router'
import { onBeforeRouteUpdate } from 'vue-router'

export const useCategory = () => {
  const categoryData = ref({})
  const route = useRoute()

  const getTopCategory = async (id = route.params.id) => {
    const res = await getTopCategoryAPI(id)
    categoryData.value = res.result
    console.log(categoryData.value)
  }

  onMounted(() => {
    getTopCategory()
  })
//重点
  onBeforeRouteUpdate((to) => {
    console.log(to)
    getTopCategory(to.params.id)
  })

  return {
    categoryData
  }
}

1.onBeforeRouteUpdate：

这是一个路由守卫，它会在当前路由改变，但仍然是同一个组件（即组件被复用）时被调用。换句话说，如果你从 /user/1 导航到 /user/2，并且这两个路由都渲染同一个组件（比如 UserComponent），那么 onBeforeRouteUpdate 会在这个组件内部被触发。
2. (to) => {...}：

这是一个箭头函数，它接收一个参数 to，这个参数是一个即将要进入的目标路由对象。这个对象包含了关于目标路由的详细信息，如 path、params、query 等。
3. console.log(to)：

这行代码会在控制台打印出目标路由对象 to 的内容。这通常用于调试，以查看在导航到新的路由时传递了哪些参数或查询。
4. getTopCategory(to.params.id)：

这行代码调用了一个名为 getTopCategory 的函数（该函数在给出的代码片段中未定义，但可以假设它在其他地方被定义）。这个函数似乎接收一个参数，该参数是从目标路由对象 to 的 params 中获取的 id。