HELP: Console error occurs with dynamic route matching

[SaitoYuto]

Dear all.

I am creating simple memo application with Vue.js.
But when I try to move on Edit page, below console error occurs.

Uncaught (in promise) Error: No match for
{"params":{}}
while being at
{"fullPath":"/edit/1711890904981","path":"/edit/1711890904981","query":{},"hash":"","params":{},"matched":[],"meta":{},"href":"/edit/1711890904981"}
at createRouterError (chunk-XLM2CFSP.js?v=a0a2938e:595:19)
at Object.resolve (chunk-XLM2CFSP.js?v=a0a2938e:1083:15)
at Object.resolve (chunk-XLM2CFSP.js?v=a0a2938e:2165:34)
at chunk-XLM2CFSP.js?v=a0a2938e:1442:39
at ReactiveEffect.fn (chunk-2FDUVFJ5.js?v=a0a2938e:1237:13)
at ReactiveEffect.run (chunk-2FDUVFJ5.js?v=a0a2938e:430:19)
at get value (chunk-2FDUVFJ5.js?v=a0a2938e:1249:107)
at triggerComputed (chunk-2FDUVFJ5.js?v=a0a2938e:449:20)
at get dirty (chunk-2FDUVFJ5.js?v=a0a2938e:402:11)
at Array.job (chunk-2FDUVFJ5.js?v=a0a2938e:3399:37)

---

My router/index.ts is below:

// Composables
import { createRouter, createWebHistory } from "vue-router/auto";
import { setupLayouts } from "virtual:generated-layouts";
import home from "@/pages/home.vue";
import add from "@/pages/add.vue";
import edit from "@/pages/edit.vue";

const routes = [
  {
    path: "/",
    name: "home",
    component: home,
  },
  {
    path: "/add/",
    name: "add",
    component: add,
  },
  {
    path: "/edit/:id",
    name: "edit",
    component: edit,
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  extendRoutes: setupLayouts,
  routes: routes,
});

export default router;

---

The way of moving to Edit page is using v-list-item :to:

<template>
  <v-main>
    <v-container>
      <v-list lines="two" v-if="store.length">
        <v-list-item
          v-for="memo in store.getMemos"
          :key="memo.id"
          :title="memo.title"
          :to="`/edit/${memo.id}`"
        >
          <v-list-item-subtitle>
            {{ memo.content }}
          </v-list-item-subtitle></v-list-item
        >
      </v-list>
      <v-alert
        v-else
        closable
        v-show="!store.length"
        text="No memos"
        type="info"
        variant="outlined"
      ></v-alert>
    </v-container>
  </v-main>
</template>

<script lang="ts" setup>
import memoStore from "@/stores/memo";

const store = memoStore();
</script>

---

[URL of memo looks good]

---

[URL looks good but error shows up]

---

Although I read official document, there are not any helpful information.
Can you please help me out?

Thanks in advance.

[SaitoYuto]

Solved.

The problem causes from lacking knowledge about vue-router/auto and environmental stuff.
I write all steps all what I did.

1. Change to "moduleResolution": "Bundler" in tsconfig.json. (Cannot find module 'vue-router/auto' vuetifyjs/create#42 (comment))
2. Create pages/edit/[id].vue. (https://uvr.esm.is/guide/file-based-routing)
3. Add "@ionic/core/loader" to exclude section in tsconfig.json. (Bundling error "Failed to fetch dynamically imported module" when adding a package made with Stencil.js vitejs/vite#12434 (comment))

Hope this help.

P.S I love very much Vue.js and relative library. I am happy to get to know such wonderful module 'vue-router/auto'!