vue.js - Vue 3 + Bootstrap 4 + VueRouter NO BootstrapVue

Question

I am a contractor on a new project. They want to use VueJS which is great, I love it. However, they also want an SPA. And lastly, Bootstrap. Since it is a SPA, we need VueRouter, fine. But I am having a difficult time integrating that into the nav-bar and still loading a route.

index.html is:

... 
<div class="container-fluid">
  <div id="app"></div>
</div>

main.js is:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "bootstrap/dist/css/bootstrap.css";

const app = createApp(App);
app.config.devtools = true;
app.use(router).mount("#app");

App.vue is:

<template>
  <header class="header fixed-top" id="headerApp">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <router-link to="/">Home</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/jobsearch">Job Search</router-link>
          </li>
          ...
        </ul>
        <router-view />
      </div>
    </nav>
  </header>
</template>
<script>
export default {
  name: "App"
};
</script>

index.js is:

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue";
...

const routes = [
  {
    path: "/about",
    name: "About",
    component: About
  },
  {
    path: "/",
    name: "Home",
    component: Home
  },
        ...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

This does have the route links but it also puts each page/view within the nav/menu. I am not sure how to create essentially a bootstrap (not bootstrap-vue) page template that is reactive to the vue-router and still load the page below the nav.

Answer 1

等待大神答复