Nuxt3 根据路由刷新接口数据

刚用nuxt3,踩坑有点多。

获取路由：

const route = useRoute()

请求数据：

// 方法1
const {data, refresh} = await useFetch('/api', {
  method: 'POST',
  body: JSON.stringify({
    pageIndex: 1
  })
})
// 方法2
// 用于动态参数
const pageIndex = ref(1)
const {data, refresh} = await useAsyncData('anyName', () => $fetch('/api, {
  method: 'POST',
  body: JSON.stringify({
    pageIndex: pageIndex.value,
  })
}))

function next(){
    pageIndex.value++;
    refresh();
}

监听数据变化：

// 第一次获取到的数据
console.log(data);

watch(data, (newData) => {
    // 通过refrsh刷新，后续获取的数据
    console.log(newData)
})

监听路由变化：

watch(route, async ({fullPath}) => {
  if (typeof fullPath === 'string') {
    refresh()

    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0

    // 手动添加百度统计pv数据
    if (window._hmt) {
      window._hmt.push(['_trackPageview', fullPath])
    }
  }
})

设置页面seo信息： 标题，关键词，描述

useHead({
  title:'',
  meta: [
    {name:'keywords', content:''},
    {name:'description', content:''},
  ],
    // 百度统计
  script:[
    {children: 'var _hmt = _hmt || [];'},
    {
        src: 'https://hm.baidu.com/hm.js?xxx',
    },
  ]
})