CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
RubyRube
RubyRube

Reputation: 602

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.

<template id="navigation">
  <div>
    <router-link to="/"  class="">Home </router-link>
    <router-link to="/about"  class="">About</router-link>      
  </div>
</template>

The links Home and About in the top left hand corner show the correct template.

I added a li element "Router" to the main navbar. On hover, the Router element doesn't show a pointer. On click, it does not trigger the correct template.

<li>
  <router-link to="/about" class="nav__menu-item"> RouterAbout</router-link>
<li>

How can I make the RouterAbout element trigger the about template?

Upvotes: 1

Views: 331

Answers (1)

Dan
Dan

Reputation: 63139

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

Upvotes: 1

Related Questions