In Vue project, why do you need to register VueRouter in router/index.js file?

Deeply understand Vue Router registration for router/index.js in Vue project

In Vue projects, router/index.js files usually contain the registration code of Vue Router, which often causes questions from developers, especially when Vue Router is also used in main.js This article will explain in detail the differences in this registration mechanism in Vue 2 and Vue 3.

In the router/index.js file, common code snippets are as follows:

 import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

This line Vue.use(VueRouter) is not an unnecessary registration. Its function is different from the use method used in main.js , the key lies in the version difference of Vue.

Vue 2:

Vue 2 adopts the method of installing plug-ins globally. Vue.use(VueRouter) installs the Vue Router plugin globally, allowing all Vue instances to access routing functionality, even if they use different configurations. Therefore, it is necessary to perform a global installation in router/index.js . Then, create a Vue Router instance in main.js and pass it as an option to the Vue instance:

 Vue.use(VueRouter); // Global installation const router = new VueRouter({ /* Configuration*/ });
new Vue({ router });

Vue 3:

Vue 3 is different. It no longer relies on global Vue.use , but installs plugins through application instances ( app ). In main.js you will see:

 import { createApp } from 'vue';
import { createRouter } from 'vue-router';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router); // Install app.mount('#app');

Here app.use(router) is an application instance method, not a global Vue.use . Therefore, in Vue 3, router/index.js does not require Vue.use(VueRouter) because the plugin installation is done in the application instance. router/index.js is responsible for creating routing instances, which are then imported and used in main.js

Summarize:

The necessity of registering Vue Router in router/index.js depends on the version of Vue: Vue 2 requires global installation, while Vue 3 is installed through application instances. This is not a duplicate registration, but two different versions of the plug-in installation mechanism. Only by understanding this difference can you avoid confusion and use Vue Router correctly.

The above is the detailed content of In Vue project, why do you need to register VueRouter in router/index.js file?. For more information, please follow other related articles on the PHP Chinese website!