Vue.js vuejs导航栏链接不工作

Vue.js vuejs导航栏链接不工作,vue.js,vuejs2,vue-component,vuex,vue-router,Vue.js,Vuejs2,Vue Component,Vuex,Vue Router,我的vuejs应用程序有一个导航栏,其代码如下所示。 问题是导航栏显示的颜色不同,但导航栏上没有可用的链接。控制台也会显示类似这样的错误。当我在stackoverflow中搜索时,我发现一些与我的问题和on相关的答案正在将auth:'更改为auth:{}。但它也不起作用。所以请任何人帮我解决这个问题。谢谢 <template> <nav class="navbar navbar-expan-lg navbar-dar bg-primary rounded"> <bu

我的vuejs应用程序有一个导航栏,其代码如下所示。 问题是导航栏显示的颜色不同,但导航栏上没有可用的链接。控制台也会显示类似这样的错误。当我在stackoverflow中搜索时,我发现一些与我的问题和on相关的答案正在将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
 })
}
}

您在上一个链接中缺少到的
。将
href
替换为
,则会出现错误

  • 注销
  • 关于未定义的
    name
    的错误也应该消失。这可能是因为它找不到由
    路由器链接定义的密钥
    未定义的
    路由


    如果这不能解决问题,您可能需要发布更多的代码。

    您在上一个链接中缺少一个到的
    。将
    href
    替换为
    ,则会出现错误

  • 注销
  • 关于未定义的
    name
    的错误也应该消失。这可能是因为它找不到由
    路由器链接定义的密钥
    未定义的
    路由


    如果这不能解决问题,您可能需要发布更多的代码。

    您的
    RouterLink
    组件缺少名为“to”的
    prop
    组件-您可以在这里也包含组件代码吗?@lto Pizarro您可以检查更新的代码吗
    RouterLink
    组件缺少名为“to”的
    prop
    组件吗“到“-你能在这里也包括组件代码吗?@lto Pizarro你能检查一下我查到的更新代码吗?”,这是App.vue从“/components/Navbar”导出默认值{name:'App',components:{'Navbar':Navbar}}我已经将所有属性都指向了属性,但它仍然不起作用。请帮助查看将
    href
    替换为
    to
    修复
    缺少的必需属性:“to”
    error我已将href改为,改为,但它也不起作用。这是App.vue从“/components/Navbar”导出默认值导入导航栏的代码{name:'App',components:{'Navbar':Navbar}}我已经将所有属性指向了属性,但它仍然不起作用。请帮助查看将
    href
    替换为
    to
    修复
    缺少的必需属性:“to”
    错误
    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
        }
      ]
    })