CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuexvue-router
Nipun Tharuksha
Nipun Tharuksha

Reputation: 2567

vuejs Navbar links not workig

My vuejs application has a navigation bar and its code as bellow. The problem is navigation bar display with its color but no links are available at the navigation bar .also console display a error like this click here to view the error . when I searched through the stackoverflow i found that some answers related to my problem and on was changing auth: '' to auth: {} . But it dosent also worked .So could any please help me to fix this.Thanks

<template>
<nav class="navbar navbar-expan-lg navbar-dar bg-primary rounded">
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar1"
aria-controls="navbar1"
aria-expanded="false"
aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse justify-content-md-center"    id="navbar1">
  <ul class="navbar-ul">
    <li class="nav-item">
      <router-link class="nav-link" to="/home">Home</router-link>
    </li>
     <li v-if="auth == ''" class="nav-item">
      <router-link class="nav-link" to="/login">Login</router-link>
    </li>
     <li v-if="auth == ''" class="nav-item">
      <router-link class="nav-link" to="/register">Register</router-link>
    </li>
     <li v-if="auth == 'loggedin'" class="nav-item">
      <router-link class="nav-link" to="/profile">Profile</router-link>
    </li>
     <li v-if="auth == 'loggedin'" class="nav-item">
      <router-link class="nav-link" to="/logout">Logout</router-link>
    </li>
  </ul>

 </div>
 </nav>
 </template>

<script>
import EventBus from './EventBus'
export default {
 data () {
return {
  auth: '',
  user: ''
  }
 },
 methods: {
 logout () {
  localStorage.removeItem('usertoken')
 }
},
mounted () {
EventBus.$on('logged-in', status => {
  this.auth = status
 })
}
}

This is the index.js of Router folder

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import Register from '@/components/Register'
import Profile from '@/components/Profile'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile
    }
  ]
})

Upvotes: 0

Views: 355

Answers (1)

Daniel
Daniel

Reputation: 35684

You are missing a to in your last link. Replace the href with to and you error should dissappear.

     <li v-if="auth == 'loggedin'" class="nav-item">
      <router-link class="nav-link" to="">Logout</router-link>
    </li>

The error about name on undefined should be gone too. This is probably because it cannot find the a route with the key undefined as defined by the router-link

If this doesn't solve it, you may need to post more code.

Upvotes: 2

Related Questions