代码实现

// router.js
import BlogListPage from "./pages/BlogListPage.vue";
import BlogPostPage from "./pages/BlogPostPage.vue";

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    component: BlogListPage,
  },
  {
    path: "/:postId",
    component: BlogPostPage,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

<!-- BlogListPage -->
<template>
  <main>
    <div className="blogPosts">
      <article v-for="blogPost in blogPosts" :key="blogPost.id">
        <h2>
          <router-link :to="`/${blogPost.id}`">{{
            blogPost.title
          }}</router-link>
        </h2>
        <p>{{ blogPost.body.substring(0, 100) + "..." }}</p>
      </article>
    </div>
  </main>
</template>
<script>
import { getAllPosts } from "../data/blogPosts";

export default {
  data() {
    return {
      blogPosts: [],
    };
  },
  created() {
    this.blogPosts = getAllPosts();
  },
};
</script>
<style scoped>
.blogPosts {
  max-width: 600px;
  display: grid;
  row-gap: 48px;
}
</style>

<!-- BlogPostPage -->
<template>
  <article>
    <h2>{{ blogPosts.title }}</h2>
    <p>{{ blogPosts.body }}</p>
    <footer>
      <router-link to="/">回到主页</router-link>
    </footer>
  </article>
</template>
<script>
import { getBlogPostById } from '../data/blogPosts';
export default {
  data() {
    return {
      blogPosts: {},
    };
  },
  created() {
    this.blogPosts = getBlogPostById(this.$route.params.postId);
  },
};
</script>

<style scoped>
article {
  max-width: 700px;
}

footer {
  margin-top: 48px;
}

footer a {
  background: linear-gradient(90deg, hsl(240deg, 50%, 50%), hsl(280deg, 50%, 50%));
  padding: 1em 1.4em;
  border-radius: 4px;
  color: white;
}
</style>