Vue.js: Router is failing

Question

So I was trying to implement routers so that, when the sidebar is active, you can click on buttons that take you to different pages, or routes.

However, the routes are not working at all, clicking on the button changes the weblink, but doesn't do anything.

Here is my code for index.js in the folder router:

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import contact from "../views/Contact.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/contact",
      name: "contact",
      component: contact,
    },
  ],
});

export default router;

my main.js is:

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
// import Vue from "vue";
import router from "./router";


const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");

and finally, my App.vue is:

<template>
  <div id="app">
    <nav class="main-nav">
      <div class="logo">my.company</div>
      <Burger></Burger>
    </nav>

    <Sidebar>
      <ul class="sidebar-panel-nav">
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>
      </ul>
    </Sidebar>
  </div>
</template>

<script lang="ts">
import Burger from "./components/Burger.vue";
import Sidebar from "./components/topbar.vue";

export default {
  name: "app",
  components: {
    Burger,
    Sidebar,
  },
};
</script>
<style>
html {
  height: 100%;
  overflow: hidden;
}

body {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "Lato";
  height: 100%;
  background: rgb(101, 31, 87);
  background: linear-gradient(
    45deg,
    rgba(101, 31, 87, 1) 0%,
    rgba(225, 113, 87, 1) 48%,
    rgba(249, 248, 113, 1) 100%
  );
}

.logo {
  align-self: center;
  color: #fff;
  font-weight: bold;
  font-family: "Lato";
}

.main-nav {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
}

ul.sidebar-panel-nav {
  list-style-type: none;
}

ul.sidebar-panel-nav > li > a {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  display: block;
  padding-bottom: 0.5em;
}
</style>

(Most of the code in App.vue is either style tag or something that doesn't have anything to do with routers, Burger represents the burger bars that toggle the Sidebar, and Sidebar is self-explanatory).

I'm not sure why the routers just isn't working, and help would be appreciated.

Answer 1

Add router-view component somewhere in the template of App.vue . It will display the component that corresponds to the url.