Question

我正在使用vue.js来构建应用程序，但我坚持这一警告，显然会影响我所有的应用程序路由器链接。我知道这可能是由于有多个 vue 实例操作引起的，但是我已经检查过，并且我不知道它可能在哪里！

Sidenav.vue

<template>
  <section id="sidenav">
    <router-link to="/" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
     uk-margin-small-bottom" active-class="uk-button-primary" exact> Home </router-link>

    <router-link to="/sistema" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
    uk-margin-small-bottom" active-class="uk-button-primary"> Gestão de Sistema </router-link>

    <router-link to="/consumo" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
    uk-margin-small-bottom" active-class="uk-button-primary"> Pontos de Consumo </router-link>

    <router-link to="/controlo" tag="button"  class="uk-button uk-button-default uk-button-large uk-width-1-1"
                 active-class="uk-button-primary">
      Controlo</router-link>
  </section>
</template>

<script>
  export default ({
  });
</script>

<style>

</style>

以下是会影响我的应用的警告：

vue.js:597 [Vue warn]: $listeners is readonly.

found in

---> <RouterLink>
       <AppSidenav> at src/components/Sidenav.vue
         <App> at src/App.vue
           <Root>

App.vue

<template>
  <div id="app">
    <div class="uk-container" style="margin-top:10px;" v-if="checkLogin()">
      <app-header></app-header>
      <div class="uk-grid my-grid">
        <div class="uk-width-1-4 my-nav">
          <app-sidenav></app-sidenav>
        </div>
        <div class="uk-width-3-4" style="border-left:1px solid #e5e5e5; padding-top: 10px;">
          <router-view></router-view>
        </div>
      </div>
      <app-footer></app-footer>
    </div>
  <app-login v-else></app-login>
  </div>
</template>

<script>
  import Header from './components/Header';
  import Sidenav from './components/Sidenav';
  import Home from './components/Home';
  import Footer from './components/Footer';
  import Login from './components/login/Login';
  import {mapGetters} from 'vuex';

  export default {
    components: {
      'appHeader': Header,
      'appSidenav': Sidenav,
      'appHome': Home,
      'appFooter': Footer,
      'appLogin': Login,
    },
    computed: {
      checkLogin() {
        return this.isLoggedIn;
      }
    },
    methods:{
      ...mapGetters(['isLoggedIn']),
    },
  }
</script>

<style>
  .my-grid{
    border-top:1px solid #e5e5e5;
    margin-top: 10px !important;
  }
  .my-nav{
    padding: 20px 10px 20px 10px;
    /*padding-top: 50px;*/
    /*padding-bottom: 20px;*/
    border-bottom: 1px solid #e5e5e5;
    /*padding-left:10px;*/
    /*padding-right:10px;*/
    /*background-color: #F0F0F0;*/
  }
</style>

我有route.js和store.js，我在其中导入 vue 并在两个文件中分别使用Router和Vuex。

Answer 1

发现了问题，我正在通过npm使用vue软件包，但是我也正在我的 index.html 文件中导入vue！

只需将其删除，一切都很好！

vue.js：597 [Vue警告]：$ listeners是只读的路由器链接

1 个答案: