Vue3将参数发送到路由而不将它们添加到url

        正常的路由跳转

                 路由文件：

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
        path:"/",
        name:"Home",
        component: () => import("../views/Home.vue"),
    },
    {
        path:"/about",
        name:"About",
        component: () => import("../views/About.vue"),
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

              路由跳转：

<template>
  <router-link :to="'/about?id='+4">跳转到about页面</router-link> <br/><br/>
  <router-link :to="{ name: 'About',  query: { id: 1 } }">带参数跳转</router-link>><br/><br/>
  <v-btn @click="toAbout(2)">编程式导航跳转</v-btn><br/><br/>
  <v-btn @click="toAbout2(2)">编程式导航跳转</v-btn><br/><br/>
</template>
<script lang="ts" setup>
import {useRouter} from "vue-router";
const  router = useRouter()
const toAbout = (id) => {
    router.push('/about?id='+id)
}
const toAbout2 = (id) => {
    router.push({
        name:'About',
        query:{id:id}
    })
}
</script>

         如何将参数发送到路由而不将它们添加到url上

                显然，如果不在 url 中显示，就不再可能通过参数发送属性。这时候我们可以使用state: { ... }：

<template>
  ...
  <p>------------解决方式如下-------------</p>
  <router-link :to="{ name: 'About', force: true, state: { id: 1 } }">跳转到about页面</router-link> <br/><br/>
    <v-btn @click="toAbout3(2)">编程式导航跳转</v-btn><br/><br/>
</template>
<script lang="ts" setup>
import {useRouter} from "vue-router";
const  router = useRouter()
...
const toAbout3 = (id) => {
    router.push({
        name:'About',
        state:{id:id}
    })
}
</script>

现在在页面的代码中，我们可以从中读取属性history.sate并将值放入需要的地方。

<script setup>
console.log(window.history.state.id)
const id = window.history.state.id
</script>

<template>
  接收参数：{
   
   {id}}
</template>

<style scoped>

</style>

        ***注：在使用state的过程中存在一个问题，就是值无法自动置空【刷新页面无法清除，值还在】