issue with VueJS loading a component in specific route

Question

I've want to get this behaviour : When I click on a blogItem, then it loads the blogtoread component in this route url/blog/{i}. I've got this code :

main.js :

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import BlogToRead from '../src/components/BlogToRead.vue'
import HelloTest from '../src/components/HelloWorld.vue'


const routes = [
  { path: '/', component: App },
  { path: '/blog/:id/:title', component: BlogToRead, name: 'blog-post'},
  { path:'/test', component: HelloTest}
]

const router = createRouter({
  history: createWebHistory(), // Use history mode for cleaner URLs
  routes,
})

const app = createApp(App)
app.use(router) // Add the router instance to the app
app.mount('#app') // Mount the app on the element with id 'app'

BlogItem.vue :

<template>
  <div>
    <div class="blog-item" @click="handleCardClick()">
    <h3 class="blog-title">{{ title }}</h3>
    <p class="blog-preview">{{ preview }}</p>
    </div>
  </div>
</template>
  
  <script>
  export default {
    props: {
      title: String,
      preview: String,
      postId: Number, // Assuming you have a unique ID for each blog post
      content: String,
      date: Date,
      author: String,
    },
    methods: {
        handleCardClick() {
          console.log("yey");
          console.log(this.$route);
          const postId = this.postId;
          const postTitle = this.title;
          console.log("test 1 :   " + this.$route.params.id + "  et " + postId +" et "+ postTitle );
          this.$router.push({ name: 'blog-post', params: { id: postId, title: postTitle } });
        },
      },
  };
  </script>

App.vue :

<template>
  <div class="app-container">
    <Navbar /> <!-- Include the Navbar component directly -->
    <Banner />
    <div class="main-container">
    <div class="portefolio-container"> <!-- Container for PortefolioCard components -->
      <PortefolioCard
        title="Project Title 1"
        :imageURL="require('../src/assets/PP.jpg')"
        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
        category="Project Category 1"
        @card-clicked="handleCardClick"
      />
      <PortefolioCard
        title="Project Title 2"
        :imageURL="require('../src/assets/PP.jpg')"
        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
        category="Project Category 2"
        @card-clicked="handleCardClick"
      />
      <PortefolioCard
        title="Project Title 3"
        :imageURL="require('../src/assets/PP.jpg')"
        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
        category="Project Category 3"
        @card-clicked="handleCardClick"
      />
    </div>
    <div class="blog-container">
        <div class="blog-column">
          <BlogItem
            v-for="post in blogPosts"
            :key="post.id"
            :title="post.title"
            :preview="post.preview"
            :postId="post.id"
            :content="post.content"
            :date="post.date"
            :author="post.author"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import HelloWorld from "@/components/HelloWorld.vue";
import Navbar from "@/components/Navbar.vue";
import PortefolioCard from "@/components/PortefolioCard.vue";
import BlogItem from "./components/BlogItem.vue";
import Banner from "@/components/Banner.vue";
import axios from "axios";


export default {
  components: {
    //HelloWorld,
    Navbar,
    PortefolioCard,
    BlogItem,
    Banner,
  },
  methods: {
    handleCardClick(title) {
      // Handle the card click event here
      console.log(`Clicked on card with title: ${title}`);
    },
  },
  data() {
    return {
      blogPosts: [],
    };
  },
  created() {
    axios
      .get("http://localhost:5287/api/blogposts")
      .then((response) => {
        this.blogPosts = response.data;
        console.log(this.blogPosts)
      })
      .catch((error) => {
        console.error("Axios request error:", error);
      });
  },
};

As you can see in the blogItem I've added a couple of console.log, it always return correctly the postId and Title props, meaning it finds it correctly.

When I'm clicking on a blogpost in my vue app in the browser I get this error content.js:33 Uncaught (in promise) Error: Illegal argument undefined

Also I get this error when I'm just running the app with no click event triggered, it makes me guess that there has to be something not right with how I've configured things in the first place.

Can you help me ?

I'm expecting to load the blogtoread component alone not the App.vue component which contains the other components

Here's the fullstack of the error :

BlogItem.vue:23 {fullPath: '/', path: '/', query: {…}, hash: '', name: undefined, …} BlogItem.vue:26 test 1 : undefined et 1 et First Article

content.js:33 Uncaught (in promise) Error: Illegal argument undefined
    at e.exports (content.js:33:95534)
    at content.js:73:1593807
    at p (content.js:73:185751)
    at Generator._invoke (content.js:73:185504)
    at Generator.next (content.js:73:186114)
    at n (content.js:73:192157)
    at s (content.js:73:192360)

the content.js is a file from Vue it appears.