Vue Router Navbar Element Not Showing Div

I'm integrating a Vue Router into a navbar. https://codepen.io/Teeke/pen/jOVQPWv This codeblock works fine, and reveals either the home template, or about template on click.

Solution 1:

The HTML is invalid and <div id="main"> is not inside your app <div> so it's not actually registered as part of the app. It also has an undefined active prop.

Move #main into #router-app:

<div id="router-app">
  <navigation></navigation>
  <router-view></router-view>

  <div id="main">
  ...
  </div>
</div>

Here is the fixed demo

Share

You may like these posts

• 
  Vuejs Lazy Loading Components Without The Router
• 
  Array.filter() Not Working Properly In Vue.js
• 
  How To Get Data Of Dynamically Nested Select Using Foreach Values In Vue
• 
  Vuejs Input Binding Based On Array Of Computed Properties