Vue.js 如何在VueRouter中动态更改每个组件的路由？

我正在尝试在我的应用程序中使用动态路由

我有一条主要路线“/blogs”，其中包含3个静态博客，我想每个博客都应该有自己的内容，比如“/blogs/blog-1”，对于blog 2，比如“/blogs/blog-2”，我已经尝试过使用文档，但由于我是初学者，所以无法理解

这是我所有组件的代码

路由器.js

import { createRouter, createWebHistory } from 'vue-router'

import Home from './components/views/Home.vue'
import Blogs from './components/views/Blogs.vue'


import Blog_1 from './components/blogs/Blog_1';
import Blog_2 from './components/blogs/Blog_2';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      component: Home,

    },
    {
      path: "/blogs",
      component: Blogs,
      children: [
        {
          path: 'blog-1',
          component: Blog_1
        },
        {
          path: 'blog-2',
          component: Blog_2
        }

      ]

    },

  ],
  scrollBehavior(to,) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
        top: 0

      }
    }
  },
});

export default router;

这里是Blog.vue，它的所有静态博客不是满的，而是半个

<template>
  <!-- ***** Blog Start ***** -->
  <section class="section" id="blog">
    <div class="container">
      <!-- ***** Section Title Start ***** -->
      <div class="row">
        <div class="col-lg-12">
          <div class="center-heading">
            <h2 class="section-title">Blog Entries</h2>
          </div>
        </div>
        <div class="offset-lg-3 col-lg-6">
          <div class="center-text">
            <p>
              Integer molestie aliquam gravida. Nullam nec arcu finibus,
              imperdiet nulla vitae, placerat nibh. Cras maximus venenatis
              molestie.
            </p>
          </div>
        </div>
      </div>
      <!-- ***** Section Title End ***** -->

      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="blog-post-thumb">
            <div class="img">
              <img src="assets/images/1x/blog-item-01.png" alt="" />
            </div>
            <div class="blog-content">
              <h3>
                <a href="#">Online Presence of Business</a>
              </h3>
              <div class="text">
                As Covid-19 came, it throttled small and medium businesses in
                great depth. Not every one can recover from it.
              </div>
              <a href="#" class="main-button">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="blog-post-thumb">
            <div class="img">
              <img
                height="220"
                width="370"
                src="assets/images/1x/blog-item-02.jpg"
                alt=""
              />
            </div>
            <div class="blog-content">
              <h3>
                <a href="#"
                  >Why Having a Website is Important for a small business?</a
                >
              </h3>
              <div class="text">
                The number of small businesses with a website is surprisingly
                low despite the growth in technology.
              </div>
              <a href="#" class="main-button">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="blog-post-thumb">
            <div class="img">
              <img
                height="220"
                width="370"
                src="assets/images/1x/blog-item-03.jpg"
                alt=""
              />
            </div>
            <div class="blog-content">
              <h3>
                <a href="#">Impact of Advertisment on Customer</a>
              </h3>
              <div class="text">
                Have you ever thought, why giant companies such as apple,
                google, Samsung invest millions on advertisement?
              </div>
              <a href="#" class="main-button">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ***** Blog End ***** -->
</template>

博客条目

妊娠期整胎膜异位妊娠。Nullam nec arcu finibus，
无生命饮食，无生命饮食。威尼那提大牡蛎
莫莱斯蒂。

随着新冠病毒19的出现，它扼杀了中国的中小企业
很深。并不是每个人都能从中恢复过来。
你有没有想过，为什么像苹果这样的大公司，
谷歌、三星在广告上投资数百万？

因为我想点击阅读更多，所以应该转到另一个组件中的完整文章

谢谢你

你可以用它来匹配那些子弹：

路线：[
{
路径：“/”，
组成部分：家庭，
},
{
路径：“/blogs/：slug”//This`:`语法表示它是一个变量
名称：'博客'，
组件：博客
},
],

（您不需要已有的子路由。）当您使用这样的路由参数时，

：slug

段可以被您喜欢的任何内容替换。因此，如果您确实访问了类似于

/blogs/blog-1

的路径，它将匹配该路径。动态部分将在组件中提供，如下所示

this.$route.params.slug

在本例中，将显示“blog-1”。另外，请注意，我给路线起了一个名字“blogs”。这样，当您想要访问该路线时，可以使用

之类的工具：

博客1

但我面临的主要问题是，如何加载组件blog-1？问题有点不清楚。如果博客是相关的，为什么它们都有自己的组件？通常的想法是让他们共享一个“Blog”组件，每个组件只是根据id从api加载其内容。否则，您将为每个Blog条目重新创建一个组件文件——这太糟糕了。这太糟糕了！我不知道，所以我只是想这么做！我没有任何rest服务，所以只需使用seprate组件尝试静态内容，这将是一个完全不同的答案，因为在这种情况下，您不会使用路由参数。但你应该一直努力，但还是很困惑