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>

        ***注: 状態を使用するプロセスに問題があります。つまり、値を自動的に空白にすることができません [ページを更新してもクリアできず、値はまだ存在します]