CODEWITHSUNDEEP
vue.jsvue-router
Matt
Matt

Reputation: 1632

Why does Vue router-link not Work on Click

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:

enter image description here

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?

Upvotes: 1

Views: 3831

Answers (1)

Radu Diță
Radu Diță

Reputation: 14201

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;

....

Upvotes: 3

Related Questions