前端 - 为什么在router文件夹下的index.js文件里面，一开始的时候需要注册VueRouter？

Question

为什么在router文件夹下的index.js文件里面，一开始的时候需要注册VueRouter？

import Vue from "vue";import VueRouter from "vue-router";// 为什么需要在这里注册一次VueRouter？Vue.use(VueRouter);

最后不是会把router实例对象export出去然后在main.js里面Vue.use(router)吗？
为什么要注册两次？

Answer 1

第一次注册是为了让 Vue 应用能够使用 Vue Router 的功能，第二次注册是告诉应用使用哪个具体的路由器实例来管理路由。

Answer 2

怎么感觉你是把 Vue2 跟 Vue3 的两处 use 的写法给混在一起了呢……

Vue2 里：

Vue.use(VueRouter); // 全局的 useconst router = new VueRouter();new Vue({ router });

Vue3 里：

const router = createRouter();createApp().use(router); // 实例的 use

都是只有一次 use，为啥会有两次？

---

P.S. 2 里的 use 是全局的，所有 Vue 实例都注入了 VueRouter（但它们可以使用不同的配置项）；3 里 use 是单个实例的，每个 Vue 实例可以自己决定是否注入 VueRouter。

Answer 3

不是只需要在 router/index.js 里面注册一次就可以了吗，然后再在 main.js 中实例化 Vue 的时候挂载一下 router 就好了。

不需要使用 Vue.use() 注册两次啊。你把 main.js 里面的 Vue.use(router) 删了，只是保留 router/index.js 里面的 Vue.use 也是可以的。

不过注册放到 router/index.js 里面是为了统一，就看个人的开发习惯了。你也可以单纯只是在 router/index.js 里面维护路由表和守卫，然后在 main.js 中 import 然后注册和挂载 vue-router

Answer 4

在router文件夹下的index.js文件中，一开始的时候需要注册VueRouter，是为了确保VueRouter能够被正确地使用和实例化。

VueRouter是Vue.js的官方路由管理器，用于构建单页面应用。在Vue应用中使用路由，需要先安装并注册VueRouter。在index.js文件中，通过import语句导入VueRouter，并使用Vue.use(VueRouter)来注册VueRouter插件。

注册VueRouter的目的是为了在Vue应用中全局地启用路由功能。通过注册VueRouter，你可以在应用中使用this.$router来访问路由实例，并在组件中定义路由组件、路由参数、路由守卫等。

而在main.js文件中再次使用Vue.use(router)，是为了将自定义的router实例挂载到Vue应用上。这是因为在创建router实例时，可能需要一些额外的配置选项，如添加路由守卫、定义路由参数等。将这些配置应用到router实例上后，再将该实例挂载到Vue应用上，以便在整个应用中访问和使用路由功能。

因此，虽然看起来像是在两个地方都注册了VueRouter，但实际上它们的作用是不同的。在index.js文件中注册VueRouter是为了启用路由功能，而在main.js文件中再次使用Vue.use(router)是为了挂载自定义的router实例。