导航选项卡重新加载页面

Question

我在玩基本原理，当我点击navigation中的路由链接时，它会重新加载页面，而不是加载页面内容，而是呈现正确的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
    },

  ]
})

我读过医生的书，看上去我做得很对，但我错了。

github链接https://github.com/drewjocham/firstVue

我想要做的是让App.vue成为父母和views的孩子。如果这不是一个好的项目结构，请纠正我。我更像一个后端的家伙(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-路由器库管理您的URL时，使用VueJs制作的单一页面网站(不重新加载)才能工作。您所创建的路由是正确的，但是组件没有加载的位置。所以，在你的App.js中，你想让你的所有组件加载，你写这个-

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

关注路由器视图，它是vue -路由器用来加载组件的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> 

关注“导航”而不是“导航”