Почему Vue ссылка на роутер не работает при клике - PullRequest
Новая
       19

Почему Vue ссылка на роутер не работает при клике

0 голосов
/ 26 апреля 2020

У меня есть следующий компонент панели навигации, который должен ссылаться на мою страницу просмотра. При наведении курсора на элемент ссылки маршрутизатора я вижу Chrome, говорящий мне, что он должен go там:

enter image description here

Но когда я нажимаю ссылка там не go.

NavBar.vue шаблон компонента: 

<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>

Вот мой app.vue шаблон 

<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>

И мои маршруты в мой 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;

Почему мой about вид не отображается, когда я нажимаю теги router-link на панели навигации?

1 Ответ

1 голос
/ 26 апреля 2020

Вы просто импортируете компонент. Вы должны вернуть его.

Изменить

component () { import("@/views/About.vue") }

на

component () { return import("@/views/About.vue") }

Или вы можете импортировать компонент за пределы определения и использовать его 

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;

....
...