导航选项卡重新加载页面

Question

我正在研究基础知识，当我单击 navigation 中的路由 link 时，它会重新加载页面但不会加载页面内容但会呈现正确的 URL .我将项目上传到 git.

这里是入口点src -> App.vue

<template>
  <navigation></navigation>
</template>

<script lang="ts">

import Navigation from "@/views/navigation/Navigation.vue";

export default({
  name: 'App',
  components: {
    Navigation
  }
});
</script>

产品结构

在导航中我有：

  <b-navbar-nav>
      <b-nav-item href="#">Home</b-nav-item>
      <b-nav-item href="/about">About</b-nav-item>
      <b-nav-item href="/contact">Contact</b-nav-item>
    </b-navbar-nav>

并在 router.ts 文件中

import Vue from 'vue'
import Router from 'vue-router'
import Contact from '@/views/contact/Contact.vue'
import About from '@/views/about/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    },

  ]
})

我已经阅读了文档，看起来我做的是正确的，但我在某个地方错了。

git集线器linkhttps://github.com/drewjocham/firstVue

我正在尝试做的是 App.vue parent 和 views children。如果这不是一个好的项目结构，请纠正我。我更像是一个后端人员 (java-spring)，并尝试学习更多的前端技术。

-----更新1----

 <b-navbar-nav>
      <b-nav-item :to="{name: 'about'}">About</b-nav-item>
      <b-nav-item :to="{contact: 'contact'}">Contact</b-nav-item>
    </b-navbar-nav>

Answer 1

首先，您必须明白，只有通过 Vue-Router 库管理您的 URL，用 VueJs 制作的单页网站（无需重新加载）才能正常工作。您所做的路线是正确的，但是没有地方可以加载组件。因此，在您的 App.js 中，即您希望加载所有组件的地方，您可以这样写 -

<template>
  <div id="app">
    <Navigation></Navigation>
    <router-view/>
  </div>
</template>

关注router-view，它是Vue-Router用来加载你的组件的vue组件。

然后考虑到您已经为路线命名，只需在导航导航中使用 : 绑定而不是 href。

也就是说，

 <b-navbar-nav>
   <b-nav-item :to="{name: 'home'}">Home</b-nav-item>
   <b-nav-item :to="{name: 'about'}">About</b-nav-item>
   <b-nav-item :to="{name: 'contact'}">Contact</b-nav-item>
</b-navbar-nav>

所有导航项目。

您的路线需要-

export default new Router({
  name: 'Navigation',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    },

  ]
})

确保您的组件导入与您的组件相关-

<template>
  <Navigation></Navigation>
</template>

<script lang="ts">

import Navigation from "@/views/navigation/Navigation.vue";

export default({
  name: 'App',
  components: {
    Navigation
  }
});
</script>

关注 'Navigation' 而不是 'navigation'

导航选项卡重新加载页面

Navigation tabs reload page

vue.js

vue-router

vuejs2