How to change routes dynamically for each component in VueRouter?

Question

I am trying to have dynamic routes in my application.

I have main route '/blogs' which contains 3 static blogs, I want is that each blog should be rendered with its own content like '/blogs/blog-1' and for blog 2 like '/blogs/blog-2', I have tried with docs but couldn't understand as I am beginner.

Here is my code to all the components,

router.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;

Here is Blog.vue which have all the static blogs not full but half

<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>

As I want to click on read more ,so it should go to the complete article which should be in another component.

Thank You

Answer 1

You can use route params to match those slugs:

routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/blogs/:slug",   // This `:` syntax means it's a variable
      name: 'blogs',
      component: Blogs
    },
  ],

(You don't need the child routes you had.) When you use a route param like that, the :slug segment can be replaced by whatever you like. So if you do visit a route like /blogs/blog-1, it will match that route. And the dynamic portion will be available in the component as

this.$route.params.slug

In this example, that would show "blog-1". Also, notice that I gave the route a name "blogs". That's so that when you want to visit that route, you can use a <router-link> like:

<router-link :to="{ name: 'blogs', params: { slug: 'blog-1' }}">
Blog 1
</router-link>