为什么点击不起作用Vue路由器链接

Question

我有以下导航栏组件，应链接到我的“关于”页面视图。当我将鼠标悬停在路由器链接元素上时，我可以看到Chrome告诉我应该去那里：

但是当我单击链接时，它不会到达那里。

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视图不显示？

Answer 1

您正在导入组件。您必须将其退回。

更改

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;

....