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.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…