Why does Vue router-link not Work on Click

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?

Radu Diță · Accepted Answer · 2020-04-26 19:09:55Z

3

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;

....

answered Apr 26, 2020 at 19:09

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does Vue router-link not Work on Click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related