Страница перезагрузки вкладок навигации - PullRequest
Новая
       7

Страница перезагрузки вкладок навигации

0 голосов
/ 22 декабря 2018

Я играю с основами, и когда я нажимаю на ссылку маршрутизации в 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>

Структура продукта

enter image description here

В навигации у меня есть: 

  <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 link 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>

1 Ответ

0 голосов
/ 22 декабря 2018

Прежде всего, вы должны понимать, что одностраничный веб-сайт (без перезагрузок), созданный в VueJs, будет работать только в том случае, если ваши URL-адреса управляются через библиотеку Vue-Router.Маршруты, которые вы сделали, правильные, но для компонента нет места для загрузки.Итак, в вашем App.js, т.е. где вы хотите, чтобы все ваши компоненты загружались, вы пишете это - 

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

Сосредоточьтесь на просмотре роутера, это vue-компонент, используемый Vue-Router для загрузки вашегокомпоненты.

Затем, учитывая, что у вас уже есть имена для ваших маршрутов, просто используйте: для привязки вместо 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>

Сосредоточьтесь на«Навигация», а не «навигация»

...