'vuejs Router is not clicking

  1. the home page navbar is in the middle of page
  2. in the paragraph, there is a router link which opens the complete site which has default navbar on top.
  3. Default navbar works no problem.

Problem is: home page> router link which says Read More> it does not open the about component. Here are the codes

index.js router file:


    import { createRouter, createWebHistory } from 'vue-router'
    import HomeView from '../views/HomeView.vue'
    import AboutView from "../views/AboutView.vue"
    import Contactus from '../Pages/ContactusForms.vue'
    const routes = [
      {
        path: '/',
        name: 'home',
        component: HomeView
      },
      {
        path: '/about',
        component: AboutView
      },
      {
        path: '/contactus',
        name: 'contactus',
        component: Contactus
      },
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router

Home page

<center>
  <router-link  to="/about"  class="btn btn-outline-black mt-3">Read More</router-link>
</center>
vue.js


Solution 1:[1]

You also need to render the active component in the router view component. That does not happen automatically.

<router-view></router-view>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tauzN

Related Questions