Comment résoudre le problème « TypeError : Impossible de lire la propriété 'yyy' de null » lors de l'utilisation de vue-router dans l'application Vue ?

Lors de l'utilisation de vue-router dans une application Vue, parfois le message d'erreur "TypeError : Impossible de lire la propriété 'yyy' de null" apparaîtra dans le code. Il s'agit d'une erreur causée par un chemin de routage incorrect de la page ou une transmission incorrecte de certains paramètres de routage lors de l'utilisation de vue-router. Cet article présentera les causes et les solutions à ce problème.

Cause

"TypeError : Impossible de lire la propriété 'yyy' de null" lors de l'utilisation de vue-router est généralement causée par les raisons suivantes :

1. Erreur de chemin de routage : lors de l'utilisation de vue-router, en raison du chemin de routage. une erreur a entraîné l'accès à une page inexistante ou non définie, ou certains paramètres n'ont pas été transmis dans l'itinéraire, entraînant une exécution incorrecte du code.

2. Erreurs de code interne du composant : Parfois, lors de l'écriture de code à l'intérieur d'un composant, des erreurs telles que le référencement de variables ou de fonctions non définies, ou de certains attributs ayant des valeurs nulles, peuvent survenir.

3. Erreur d'instanciation du composant : lorsque le composant est instancié, le type de paramètre transmis est incorrect ou le paramètre est une valeur nulle, ce qui entraîne une erreur d'exécution de code.

Solution

Pour différentes raisons, nous pouvons adopter différentes solutions pour résoudre ce problème.

1. Erreur de chemin de routage

Lorsqu'un message d'erreur tel que "TypeError : Impossible de lire la propriété 'yyy' de null" apparaît, vous devez vérifier si le chemin de routage de la page est correct. Tout d'abord, vous pouvez vérifier si la configuration du routage est correcte et si les composants correspondants corrects sont configurés pour l'itinéraire correspondant.

Deuxièmement, vous devez vérifier si les paramètres de la page sont correctement transmis. Lors de la transmission de paramètres, vous devez faire attention à savoir si le type de paramètre transmis est correct, s'il est nul, etc. Lors de la transmission de paramètres à l'intérieur du composant, vous pouvez utiliser des accessoires pour définir, par exemple :

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

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

Utilisez des accessoires pour transmettre des paramètres dans la configuration de routage :

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

2 Erreur de code à l'intérieur du composant

Lorsque "TypeError : Impossible de lire la propriété" apparaît à l'intérieur du composant yyy' du message d'erreur null", vous devez vérifier s'il y a des erreurs dans le code interne du composant. Vous devez d’abord vérifier si la variable ou la fonction est correctement définie. Si vous utilisez une bibliothèque tierce, vous devez vérifier si le fichier de bibliothèque est correctement introduit.

Deuxièmement, vous devez vérifier si le transfert de données entre les composants est correct. Dans Vue, vous pouvez utiliser le bus d'événements ou Vuex pour le transfert et la gestion des données. Le bus d'événements peut utiliser $emit et $on de l'instance Vue pour transmettre et surveiller des événements, tels que :

// 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');
  },
};

ou utiliser Vuex pour la gestion des données, tels que :

// 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. Erreur d'instanciation du composant

Lorsque le composant est. instancié, lorsque le message d'erreur « TypeError : Cannot read property 'yyy' of null » apparaît, vous devez vérifier si le type de paramètre transmis est correct ou si le paramètre est vide. Dans Vue, vous devez faire attention à savoir si le type de propriété est correct lors de la définition des accessoires.

De plus, lors de l'instanciation d'un composant, vous pouvez utiliser l'instruction v-if pour déterminer si le composant doit être instancié. Par exemple :

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

Lorsque isComponentAActive est vrai, le composant ComponentA sera instancié, sinon le composant ComponentB sera instancié.

Conclusion

Lors de l'utilisation de vue-router, le message d'erreur "TypeError: Cannot read property 'yyy' of null" apparaît, ce qui est généralement causé par des erreurs de chemin de routage, des erreurs de code interne du composant ou des erreurs d'instanciation du composant. Face à de telles erreurs, vous pouvez prendre des solutions appropriées en fonction des différentes causes du problème. Si vous avez encore des questions, vous pouvez vous référer à la documentation sur le site officiel de Vue ou demander de l'aide à la communauté Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!