0

EDIT: Just realized this is an anti-pattern, so I will be looking into alternative methods of solving this, probably by using pinia to store the Object that is bing passed.

Vue 3 Project Setup:

  • Note: This project is also using unplugin-vue-components and unplugin-auto-import which is why the imports are not present in some files.

src/main.ts

import { createApp } from "vue";
import { createRouter, createWebHashHistory } from "vue-router";
import App from "./App.vue";
import routes from "~pages";

// router
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass: "active",
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition;
    return { top: 0 };
  },
});

const app = createApp(App);
app.use(router);
app.mount("#app");

App.vue

<script setup lang="ts"></script>

<template>
  <div id="viewport">
    <RouterView />
  </div>
</template>

src/pages/examples/index.vue

  • Accessible through http://localhost:8080/#/examples
<script setup lang="ts">
import { reactive, ref, inject, onMounted } from "vue";

interface Example {
  id: number,
  name: string;
}

const examples = ref<Example[]>([
  {
    id: 1,
    name: "Example object name 1",
  },
  {
    id: 2,
    name: "Example object name 2",
  },
]);
</script>

<template>
  <table>
    <tbody>
      <router-link
        v-for="e in examples.value"
        :key="e.id"
        v-slot="{ navigate }"
        :to="{
          path: `/examples/${e.id}`,
          params: { example: e },
        }"
        custom
      >
        <tr role="button" @click="navigate">
          <td>
            {{ e.id }}
          </td>
        </tr>
      </router-link>
    </tbody>
  </table>
</template>

src/pages/examples/[id].vue

  • Accessible through http://localhost:8080/#/examples/1
<script setup lang="ts">
import { ref, inject, onMounted } from "vue";

interface Props {
  id: number;
  name: string | undefined;
}

const props = defineProps<Props>();
</script>

<template>
  <div>
    {{ props.id }}
    </br>
    {{ props?.name }}
  </div>
</template>

So far what I have here ^ works. But I get this error (and the optional Prop e is not passed to [id].vue):

[Vue Router warn]: Path "/examples/1" was passed with params but they will be ignored. Use a named route alongside params instead.
  • from vue-router.mjs
Rio Weber
  • 2,757
  • 1
  • 20
  • 28
  • The error is correct in it's advice: `Use a named route alongside params instead.` i.e. specify **name** instead of **path** in your router-link if you also want to include params – yoduh Dec 16 '22 at 00:29
  • 1
    Yes. I figured that out, but for the longest time I couldn't figure out what the name of the routes actually were, haha. `vite-plugin-page` doesn't tell you the name of the pages. But I just figured out how to get the name using the https://github.com/vuejs/devtools/releases. So I'm on the right track. – Rio Weber Dec 16 '22 at 00:38

0 Answers0