Dans Vue Project, pourquoi avez-vous besoin d'enregistrer Vuerouter dans le fichier routeur / index.js?

Comprendre profondément l'enregistrement du routeur Vue pour router/index.js dans le projet Vue

Dans les projets Vue, les fichiers router/index.js contiennent généralement le code d'enregistrement du routeur Vue, qui provoque souvent des questions des développeurs, en particulier lorsque le routeur Vue est également utilisé dans main.js Cet article expliquera en détail les différences dans ce mécanisme d'enregistrement des Vue 2 et Vue 3.

Dans le fichier router/index.js , les extraits de code communs sont les suivants:

 Importer Vue à partir de "Vue";
Importer Vuerouter de "Vue-Router";
Vue.use (Vuerouter);

Cette ligne Vue.use(VueRouter) n'est pas un enregistrement inutile. Sa fonction est différente de la méthode use utilisée dans main.js , la clé réside dans la différence de version de Vue.

Vue 2:

Vue 2 adopte la méthode d'installation des plug-ins à l'échelle mondiale. Vue.use(VueRouter) installe le plugin du routeur Vue globalement, permettant à toutes les instances VUE d'accéder à la fonctionnalité de routage, même si elles utilisent différentes configurations. Par conséquent, il est nécessaire d'effectuer une installation globale dans router/index.js . Ensuite, créez une instance de routeur Vue dans main.js et passez-le en option à l'instance Vue:

 Vue.use (Vuerouter); // l'installation globale const Router = new VUerouter ({/ * Configuration * /});
new vue ({router});

Vue 3:

Vue 3 est différent. Il ne s'appuie plus sur Global Vue.use , mais installe des plugins via des instances d'application ( app ). Dans main.js vous verrez:

 import {createApp} de 'vue';
import {Createrouter} de 'Vue-Router';
Importer l'application à partir de './app.vue';
Importer le routeur de './router';

const app = createApp (app);
app.use (routeur); // install app.mount ('# app');

Ici app.use(router) est une méthode d'instance d'application, pas un Vue.use global.use. Par conséquent, dans Vue 3, router/index.js ne nécessite pas Vue.use(VueRouter) car l'installation du plugin est effectuée dans l'instance d'application. router/index.js est responsable de la création d'instances de routage, qui sont ensuite importées et utilisées dans main.js

Résumer:

La nécessité d'enregistrer le routeur Vue dans router/index.js dépend de la version de Vue: Vue 2 nécessite une installation globale, tandis que Vue 3 est installé via des instances d'application. Ce n'est pas un enregistrement en double, mais deux versions différentes du mécanisme d'installation du plug-in. Ce n'est qu'en comprenant cette différence que vous pouvez éviter la confusion et utiliser correctement le routeur 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!