Why do you need to register VueRouter in router/index.js file?

Necessity of registering VueRouter in router/index.js file in Vue.js project

The routing management of Vue.js applications is crucial and is responsible for page navigation and status control. Typically, routing logic is centrally configured in router/index.js files. So, why do you need to register VueRouter in this file?

Code snippet:

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

Many people are puzzled that since main.js also uses routing instances:

 import router from './router'
Vue.use(router);

Is it a repeat operation? In fact, this stems from the difference in usage of Vue2 and Vue3.

Vue2: Vue.use(VueRouter) is global. Install the VueRouter plug-in into Vue so that all Vue instances can access VueRouter , but can use different configurations. After that, create the routing instance and pass in when creating the Vue instance:

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

Vue3: Vue.use() method acts on a single Vue application instance. First create a routing instance, and then use the use method to inject when creating an application instance:

 const router = createRouter({ /* configuration*/ });
createApp(App).use(router); // Instance registration

The key is that whether Vue2 or Vue3, the use method only needs to be called once, and there is no duplicate registration. If two use calls appear in the code, it may be that the writing of the two versions is confused.

Therefore, it is necessary to call Vue.use(VueRouter) in router/index.js , which ensures that VueRouter is correctly installed into Vue, providing guarantees for subsequent routing configuration and use. router/index.js is responsible for configuring routing, while main.js is responsible for applying configured routing instances to Vue applications. They divide the work and work together to complete the routing function.

The above is the detailed content of 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!