How to change routes dynamically for each component in VueRouter? - vue.js

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>
Online Presence of Business
</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>
Read More
</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>
Read More
</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>
Impact of Advertisment on Customer
</h3>
<div class="text">
Have you ever thought, why giant companies such as apple,
google, Samsung invest millions on advertisement?
</div>
Read More
</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>