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

Z时代
2024-02-12
分类：IT

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

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

回答：

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

Vue2 里：

Vue.use(VueRouter); // 全局的 use
const 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。

回答：

不是只需要在 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

Edit

使用 Vue.use() 注册和在Vue实例中挂载都是为了整个应用都有路由功能。可以在Vue的文档中看到这部分的内容 ? 插件 — Vue.js 2.x
Vue2中需要单独又重新挂载是为了在业务中可以使用 this.router/this.route 去使用 vue-router，这部分可以在起步 | Vue Router 3.x 中看到。