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-Router Library管理URL的情况下，在VueJ中创建的单页网站（不重新加载）才可以工作。您所建立的路线是正确的，但是没有地方可以加载组件。因此，在App.js中，即要加载所有组件的位置，请编写此代码-

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

关注路由器视图，它是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>

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

导航标签重新加载页面

1 个答案: