Tauri+Nuxt3应用中查询参数丢失问题求助

针对你遇到的跳转后route.query为空、刷新才显示的问题，给你几个具体的排查和解决方向：

1. 在组件生命周期中监听路由参数变化 #

直接在setup顶层获取route.query可能赶不上客户端导航的路由更新时机，改用watch监听或者在onMounted中读取：

import { ref, watch, onMounted } from 'vue'
const route = useRoute()
const customer = ref('')

// 方式1：监听路由query变化，immediate确保初始化时执行一次
watch(() => route.query, (newQuery) => {
  customer.value = newQuery.customer || ''
  console.log(customer.value)
}, { immediate: true })

// 方式2：在组件挂载后读取
onMounted(() => {
  customer.value = route.query.customer || ''
  console.log(customer.value)
})

2. 处理对象类型参数的序列化 #

如果customer是对象，直接作为query参数传递会因为序列化丢失数据，需要先转成JSON字符串：

列表页跳转代码修改： #

const { $router } = useNuxtApp()

function editCustomer(customer) {
  // 将对象转为JSON字符串
  $router.push({ 
    path: '/customer/new', 
    query: { customer: JSON.stringify(customer) } 
  })
}

接收页解析参数： #

import { ref, watch } from 'vue'
const route = useRoute()
const customer = ref({})

watch(() => route.query.customer, (rawVal) => {
  if (rawVal) {
    try {
      // 解析JSON字符串为对象
      customer.value = JSON.parse(rawVal)
      console.log(customer.value)
    } catch (e) {
      console.error('客户数据解析失败', e)
    }
  }
}, { immediate: true })

3. 切换Nuxt路由为Hash模式 #

Tauri的webview对history模式的路由支持可能有兼容性问题，改成hash模式试试：
在nuxt.config.ts中配置：

export default defineNuxtConfig({
  app: {
    router: {
      options: {
        hashMode: true
      }
    }
  }
})

4. 使用Nuxt官方推荐的navigateTo方法 #

替换直接操作$router，改用Nuxt提供的navigateTo工具函数：

import { navigateTo } from 'nuxt/app'

async function editCustomer(customer) {
  await navigateTo({
    path: '/customer/new',
    query: { customer: JSON.stringify(customer) }
  })
}

5. 检查Tauri窗口配置 #

确保Tauri允许webview的路由导航，在tauri.conf.json中确认webview的权限设置：

{
  "tauri": {
    "window": {
      "webview": {
        "allowlist": {
          "all": true
        }
      }
    }
  }
}

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