Navigation tabs reload page

Question

I am playing with fundamentals and when I click on a routing link in the navigation it reloads the page and doesn't load the page content but renders the correct URL. I uploaded the project to git.

Here is the entry point src -> App.vue

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

<script lang="ts">

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

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

Product structure

In navigation I have:

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

and in the router.ts file

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
    },

  ]
})

I have read the doc's and it looks like I am doing correctly but I am wrong somewhere.

github link https://github.com/drewjocham/firstVue

What I am trying to do it make App.vue the parent and the views children. If this is not a good project structure please correct me. I am more of a backend guy (java-spring) and trying learn more frontend technologies.

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

Bhaskar · Accepted Answer · 2018-12-22 21:07:51Z

1

First of all, you have to understand that a single page website (No Reloads) made in VueJs will only work if your URLs are managed through Vue-Router Library. The routes you have made are correct but there is no place for the component to load. So, in your App.js i.e where you want all your components to load you write this-

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

Focus on the router-view, it is a vue component used by the Vue-Router to load your components.

Then considering you already have names for your routes, just use the :to bind instead of the href in your navigation navs.

That means,

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

for all your nav items.

Your routes need to be-

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

  ]
})

Make sure your component imports co-relate with your components-

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

<script lang="ts">

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

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

Focus on the 'Navigation' rather than the 'navigation'

edited Dec 22, 2018 at 21:07

answered Dec 22, 2018 at 19:08

Bhaskar

1,9562 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhaskar Over a year ago

Use <b-nav-item :to="{name: 'contact'}">Contact</b-nav-item> focus on the name key

Bhaskar Over a year ago

Alright, there are some problems in your components. I'll edit my answer accordingly

Collectives™ on Stack Overflow

Navigation tabs reload page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related