vuejs Navbar links not workig - vue.js

Question

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
}
]
})

Answer 1

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.