Question

我刚刚开始学习Vue。实际上，我对Vue router部分感到困惑。这是一个非常简单的问题。我尝试寻找许多文档和Tut，但没有找到我想要的东西。我可能是我无法正确实施它们的错，我作为一个初学者可以理解，但仍然遇到问题。让我解释一下我想获得什么以及到目前为止我做了什么。

这是我的Home.vue文件，我希望用户默认在/路径上看到此页面。

<template>
    <div>
        <MainNavigation />
        <LandingSection />
        <Services />
        <WhyKontext />
        <SignupTrial />
        <Footer />
    </div>
</template>

这是我的App.vue

代码

<template>
    <div>
        <Home />
    </div>
</template>

<script>
    import Home from "./views/landing/Home";
    export default {
        name: "App",
        components: {
            Home,
        },
    };
</script>

这是我的router.js

import Vue from "vue";
import VueRouter from "vue-router";
import LoginRegister from "./views/account/LoginRegister";
import App from "./App";
Vue.use(VueRouter);

export default new VueRouter({
    mode: "history",
    routes: [
    {
        path: "/",
        component: App,
    },
    {
        path: "/account",
        component: LoginRegister,
    },
    ],
});

在MainNavigation.vue上有这段代码

<router-link to="/account" class="bg-color text-white">TRY CONTEXT </router-link>

我正在尝试的是：如果用户单击 TRY KONTEXT 按钮，我希望他们进入名为LoginRegister.vue的“注册/登录”页面。我尝试将<router-view></router-view>放在MainNavigation上，但是LoginRegister页面附有其余Home组件。当我在http://localhost:8080/上时，我会得到完整的Home。当我单击 TRY KONTEXT 按钮时，将我带到http://localhost:8080/account，但仍然可以看到所有Home组件以及LoginRegister。我正在尝试在所有页面上制作MainNavigation和Footer，并根据路线更改中间的内容。在这种情况下，我实际上想查看MainNavigation，LoginRegister和Footer。我知道这是一个愚蠢的问题。请帮助我。

Answer 1

尝试将router-view放在App.vue中，并放置其中的基本布局，例如页眉/页脚/边栏。现在，您的App.vue应该包含以下内容：

<template>
    <div class="container">
        <AppHeader></AppHeader>
        <router-view/>
        <AppFooter></AppFooter>
    </div>
</template>

然后将Home.vue移至一个单独的文件，以使其不包含布局中已经包含的页眉和页脚：

<template>
    <div class="container">
        <carousel></carousel>
        <image-grid></image-grid>
    </div>
</template>

现在，在您的router.js中，指定路线，就像这样：

import Home from './path/to/home.vue'
routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    }
]

Answer 2

尝试像这样编辑App.vue组件模板：

<template>
    <div>
        <router-view/>
    </div>
</template>

其背后的逻辑是该应用程序显示路由器的当前选择。

如何使用vue路由器在不同页面之间导航？

2 个答案: