vuejs ссылки Navbar не работают - PullRequest
Новая
       14

vuejs ссылки Navbar не работают

0 голосов
/ 06 марта 2019

В моем приложении vuejs есть панель навигации и ее код, указанный ниже. Проблема заключается в отображении панели навигации в цвете, но на панели навигации нет доступных ссылок. Также на консоли отображается ошибка, подобная этой Нажмите здесь, чтобы просмотреть ошибку . когда я искал через стековый поток, я обнаружил, что некоторые ответы, связанные с моей проблемой, включали auth: '' в auth: {} . Но это не помогло. Так что, пожалуйста, помогите мне исправить это. Спасибо 

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

Это index.js папки Router 

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

1 Ответ

2 голосов
/ 06 марта 2019

Вам не хватает to в вашей последней ссылке.Замените href на to, и ваша ошибка должна исчезнуть. 

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

Ошибка около name для неопределенного также должна исчезнуть.Вероятно, это связано с тем, что он не может найти маршрут с ключом undefined, как определено в router-link

Если это не решит проблему, возможно, вам потребуется опубликовать больше кода.

...