如何在Nuxt.js路由查询参数变更时显示加载指示器

问题根因 #

前端路由默认仅在路径段（pathname）发生变更时，判定为路由切换，触发对应的数据预加载、组件重挂载逻辑，进而唤起加载指示器；仅查询参数（query/search）变更时，会复用当前路由对应的组件实例，不会走默认的路由切换加载触发逻辑，因此加载指示器不显示。

你提到的加载指示器示例：

通用解决方案 #

核心逻辑是：监听路由全路径（包含查询参数）的变化，只要路由地址发生变更（无论变的是路径还是查询参数），就主动触发加载指示器的显示逻辑，等到新的页面数据/资源加载完成后再关闭指示器。

如果你用的是Vue + Vue Router #

你可以在全局路由守卫中监听fullPath变化，而不是仅判断路径匹配：

// router/index.js
router.beforeEach((to, from, next) => {
  // 只要前后fullPath不一致，就触发加载
  if (to.fullPath !== from.fullPath) {
    showLoadingIndicator() // 你的加载指示器显示方法
  }
  next()
})

router.afterEach(() => {
  hideLoadingIndicator() // 你的加载指示器隐藏方法
})

如果是用<Suspense>或者组件内数据加载的场景，可以在组件内监听$route.query的变化，变化时主动触发加载状态：

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
watch(() => route.query, () => {
  showLoadingIndicator()
  // 执行新的分页数据请求逻辑，请求结束后隐藏加载
  fetchListData().finally(() => hideLoadingIndicator())
}, { deep: true })
</script>

如果你用的是React + React Router #

在v6+版本中，你可以用useLocation钩子监听全路径变化：

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

function App() {
  const location = useLocation()

  useEffect(() => {
    // 路径（含查询参数）变化时触发加载
    showLoadingIndicator()
    // 等待数据加载完成后隐藏，可结合你的数据请求库逻辑调整
    const hideLoading = async () => {
      await waitForPageDataLoad() // 你的数据加载等待逻辑
      hideLoadingIndicator()
    }
    hideLoading()
  }, [location.href]) // 监听全路径变化，而非仅location.pathname

  // 其余逻辑
}

如果是路由守卫类的方案，可以在路由拦截的逻辑中增加对search参数变化的判断。

如果你用的是Next.js（App Router） #

可以在全局的loading.js之外，通过usePathname和useSearchParams组合监听路由变化：

'use client'
import { useEffect, useState } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export default function GlobalLoading() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    setIsLoading(true)
    // 模拟数据加载完成后隐藏，可替换为你的业务请求完成逻辑
    const timer = setTimeout(() => setIsLoading(false), 300)
    return () => clearTimeout(timer)
  }, [pathname, searchParams]) // 路径和查询参数任意变化都触发

  return isLoading ? <YourLoadingComponent /> : null
}

额外注意事项 #

• 如果你的加载指示器是和组件的mounted/useEffect生命周期绑定的，可以给路由对应的组件添加key属性，值为路由全路径，这样参数变化时组件会强制重挂载，自动触发原有加载逻辑：

  <!-- Vue 示例 -->
  <router-view :key="$route.fullPath" />
  

  {/* React 示例 */}
  <Outlet key={window.location.href} />
  

• 注意排除不需要触发加载的查询参数变化场景（比如仅埋点参数、临时状态参数变更），避免出现不必要的加载指示器闪动。

内容的提问来源于stack exchange，提问作者KAVA