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