Vue3 - 渲染查询参数

总的来说，我对 Vue 还是很陌生，尤其是 Vue3。我有一条/mypage采用一个查询参数的路由，id例如/mypage?id=hjhj.

我想要实现的是在/mypage?id=hjhj

router/index.js

const isServer = typeof window === 'undefined';

const history = isServer ? createMemoryHistory() : createWebHistory();

const routes = [{

        path: '/',

        name: 'Home',

        component: Home,

    },

    {

        path: '/about',

        name: 'About',

        component: About,

    },

    {

        path: '/mypage',

        name: 'mypage',

        component: MyPage,

        props: (route) => ({

            foo: route.query.foo

        }),

    }

];

const router = createRouter({

    history,

    routes,

});

export default router;

MyPage.vue

<template>

   <h2>Home</h2>

   <h3>{{ this.foo }}</h3>

</template>

<script>

   export default {

     props: {

       foo: {

         type: String,

         default: null,

       },

     },

   };

</script>

结果：

我应该在“主页”下方看到 hjhj