Laravel/Inertia Vue如何修改浏览器历史Hash且避免不必要请求

针对Inertia覆盖Hash、router.visit触发不必要请求的问题，提供两种可行方案：

方案1：手动同步Inertia页面URL与浏览器Hash #

直接修改浏览器Hash后，同步更新Inertia内部跟踪的页面URL，避免后续表单操作重置Hash，且完全不触发服务器请求：

<script setup>
import { useInertia } from '@inertiajs/vue3'
import { ref } from 'vue'

const { page } = useInertia()
const selectedTab = ref('默认标签slug')

const switchTab = (tab) => {
  selectedTab.value = tab.slug
  const newUrl = `${window.location.pathname}#${tab.slug}`
  // 更新浏览器历史Hash
  history.replaceState(null, '', newUrl)
  // 同步Inertia的页面URL，防止被覆盖
  page.value.url = newUrl
}
</script>

方案2：使用Inertia Router的replace方法（无服务器请求） #

利用Inertia官方API，通过配置参数避免发起服务器请求，同时更新Hash与内部状态：

<script setup>
import { useInertia } from '@inertiajs/vue3'
import { ref } from 'vue'

const { router } = useInertia()
const selectedTab = ref('默认标签slug')

const switchTab = (tab) => {
  selectedTab.value = tab.slug
  router.replace(`#${tab.slug}`, {
    preserveState: true,
    preserveScroll: true,
    only: [], // 跳过props更新，不触发服务器请求
    replace: true,
  })
}
</script>

页面刷新恢复标签状态 #

在组件初始化时读取URL Hash，自动选中对应标签：

<script setup>
import { ref, onMounted } from 'vue'

const tabs = ref([/* 你的标签列表，格式如{ slug: 'tab1', name: '标签1' } */])
const selectedTab = ref(tabs.value[0].slug)

onMounted(() => {
  const hash = window.location.hash.slice(1)
  const matchedTab = tabs.value.find(tab => tab.slug === hash)
  if (matchedTab) {
    selectedTab.value = matchedTab.slug
  }
})
</script>

内容的提问来源于stack exchange，提问作者Marc Bellêtre