Wie kann das Problem „TypeError: Eigenschaft ‚yyy' von Null kann nicht gelesen werden' gelöst werden, wenn der Vue-Router in der Vue-Anwendung verwendet wird?

Bei der Verwendung von vue-router in einer Vue-Anwendung erscheint manchmal die Fehlermeldung „TypeError: Cannot read property ‚yyy‘ of null“ im Code. Dies ist ein Fehler, der durch den falschen Routing-Pfad der Seite oder die falsche Übergabe einiger Routing-Parameter bei Verwendung von Vue-Router verursacht wird. In diesem Artikel werden die Ursachen und Lösungen für dieses Problem vorgestellt.

Ursache

„TypeError: Cannot read property ‚yyy‘ of null“ bei Verwendung von Vue-Router wird im Allgemeinen durch die folgenden Gründe verursacht:

1. Routing-Pfadfehler: Bei Verwendung von Vue-Router aufgrund des Routing-Pfads Der Fehler führte zum Zugriff auf eine nicht vorhandene oder nicht definierte Seite oder einige Parameter wurden in der Route nicht übergeben, was dazu führte, dass der Code nicht ordnungsgemäß ausgeführt wurde.

2. Interne Codefehler der Komponente: Beim Schreiben von Code innerhalb einer Komponente können manchmal Fehler auftreten, z. B. beim Verweisen auf undefinierte Variablen oder Funktionen oder auf einige Attribute mit Nullwerten.

3. Komponenteninstanziierungsfehler: Wenn die Komponente instanziiert wird, ist der übergebene Parametertyp falsch oder der Parameter ist ein Nullwert, was zu einem Codeausführungsfehler führt.

Lösung

Aus verschiedenen Gründen können wir unterschiedliche Lösungen zur Lösung dieses Problems anwenden.

1. Routing-Pfad-Fehler

Wenn eine Fehlermeldung wie „TypeError: Cannot read property ‚yyy‘ of null“ erscheint, müssen Sie überprüfen, ob der Routing-Pfad der Seite korrekt ist. Zunächst können Sie überprüfen, ob die Routing-Konfiguration korrekt ist und ob die richtigen entsprechenden Komponenten für die entsprechende Route konfiguriert sind.

Zweitens müssen Sie prüfen, ob die Seitenparameter korrekt übergeben werden. Bei der Übergabe von Parametern müssen Sie darauf achten, ob der übergebene Parametertyp korrekt ist, ob er null ist usw. Wenn Sie Parameter innerhalb der Komponente übergeben, können Sie Requisiten verwenden, um beispielsweise Folgendes zu definieren:

<template>
  <div>
    <h1>{{title}}</h1>
  </div>
</template>

<script>
export default {
  name: 'Article',
  props: {
    title: String,
  },
};
</script>

Verwenden Sie Requisiten, um Parameter in der Routing-Konfiguration zu übergeben:

const routes = [
  {
    path: '/article/:id',
    name: 'Article',
    component: Article,
    props: true,
  }
]

2. Codefehler innerhalb der Komponente

Wenn „TypeError: Eigenschaft kann nicht gelesen werden“ Wenn in der Komponente „yyy' of null“ eine Fehlermeldung angezeigt wird, müssen Sie überprüfen, ob Fehler im internen Code der Komponente vorliegen. Zunächst müssen Sie prüfen, ob die Variable oder Funktion korrekt definiert ist. Wenn Sie eine Bibliothek eines Drittanbieters verwenden, müssen Sie prüfen, ob die Bibliotheksdatei korrekt eingeführt wurde.

Zweitens müssen Sie prüfen, ob die Datenübertragung zwischen den Komponenten korrekt ist. In Vue können Sie Event Bus oder Vuex für die Datenübertragung und -verwaltung verwenden. Der Ereignisbus kann $emit und $on der Vue-Instanz verwenden, um Ereignisse zu übermitteln und zu überwachen, wie zum Beispiel:

// Event Bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// Component 1.js
import { EventBus } from './Event Bus.js';
export default {
  name: 'Component1',
  created: function() {
    EventBus.$on('event-name', this.handleEvent);
  },
  methods: {
    handleEvent: function(data) {
      console.log('Received data:', data);
    },
  }
};

// Component 2.js
import { EventBus } from './Event Bus.js';
export default {
  name: 'Component2',
  created: function() {
    EventBus.$emit('event-name', 'Hello World');
  },
};

, oder Vuex für die Datenverwaltung verwenden, wie zum Beispiel:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    message: 'Hello World',
  },
  mutations: {
    setMessage: (state, payload) => {
      state.message = payload;
    },
  },
  actions: {
    updateMessage: ({commit}, payload) => {
      commit('setMessage', payload);
    },
  }
});

export default store;

// Component 1.js
import { mapState } from 'vuex';
export default {
  name: 'Component1',
  computed: {
    ...mapState(['message']),
  },
};

// Component 2.js
import { mapActions } from 'vuex';
export default {
  name: 'Component2',
  methods: {
    ...mapActions(['updateMessage']),
    handleClick: function() {
      this.updateMessage('Updated Message');
    },
  },
};

3. Komponenteninstanziierungsfehler

Wenn die Komponente vorhanden ist instanziiert. Wenn die Fehlermeldung „TypeError: Eigenschaft ‚yyy‘ von Null kann nicht gelesen werden“ erscheint, müssen Sie prüfen, ob der übergebene Parametertyp korrekt ist oder ob der Parameter leer ist. In Vue müssen Sie beim Definieren von Requisiten darauf achten, ob der Typ der Eigenschaft korrekt ist.

Darüber hinaus können Sie beim Instanziieren einer Komponente mithilfe der v-if-Anweisung bestimmen, ob die Komponente instanziiert werden muss. Zum Beispiel:

<template>
  <div>
    <component-a v-if="isComponentAActive"></component-a>
    <component-b v-else></component-b>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  name: 'App',
  components: {
    ComponentA,
    ComponentB,
  },
  data: function() {
    return {
      isComponentAActive: true,
    };
  },
};
</script>

Wenn isComponentAActive wahr ist, wird Komponente ComponentA instanziiert, andernfalls wird Komponente ComponentB instanziiert.

Fazit

Bei Verwendung von vue-router erscheint die Fehlermeldung „TypeError: Cannot read property ‚yyy‘ of null“, die normalerweise durch Routing-Pfadfehler, Fehler im internen Code der Komponente oder Fehler bei der Instanziierung der Komponente verursacht wird. Bei der Behebung solcher Fehler können Sie auf der Grundlage der unterschiedlichen Problemursachen geeignete Lösungen finden. Wenn Sie noch Fragen haben, können Sie sich die Dokumentation auf der offiziellen Vue-Website ansehen oder sich an die Vue-Community wenden, um Hilfe zu erhalten.

Das obige ist der detaillierte Inhalt vonWie kann das Problem „TypeError: Eigenschaft ‚yyy' von Null kann nicht gelesen werden' gelöst werden, wenn der Vue-Router in der Vue-Anwendung verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!