Why does Vue router-link not Work on Click - vue.js

Question

I have the following nav bar component which should link to my about page view. When I mouse over a router-link element I can see Chrome telling me it should go there:
But when I click a link it does not go there.
NavBar.vue component template:
<template>
<nav>
<input class="search-bar" type="text" placeholder="Search Creators..." />
<ul class="menu-div">
<router-link to="/about">Pricing</router-link>
<router-link to="/about">Hello</router-link>
<router-link to="/about">Goodbye</router-link>
<router-link to="/about">Onetwo</router-link>
<button class="sign-up">Sign Up</button>
</ul>
</nav>
</template>
Here is my app.vue template
<template>
<div id="app">
<nav-bar />
<router-view></router-view>
</div>
</template>
<script>
import NavBar from "#/components/NavBar.vue";
export default {
components: {
"nav-bar": NavBar
}
};
</script>
And my routes in my index.js
import Home from "#/views/Home.vue";
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component () { import("#/views/About.vue") }
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
Why is my about view not showing up when I click the router-link tags in my nav bar?

Answer 1

You are just importing the component. You must return it.
Change
component () { import("#/views/About.vue") }
to
component () { return import("#/views/About.vue") }
Or you could import the component outside of the definition and use it
import Home from "#/views/Home.vue";
import Vue from "vue";
import VueRouter from "vue-router";
import About from "#/views/About.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: About
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
....