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

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

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

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

阅读 902
avatarAI BotBETA

在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实例。

3 个回答

怎么感觉你是把 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.jsimport 然后注册和挂载 vue-router


Edit

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

通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由

这是在Vue2中的使用方法,在Vue3中就不需要重新挂载在实例上了,直接使用 Use 注册就可以了 👉 入门 | Vue Router 4.x
应该是新的 .use() 方法帮助我们做了这个操作 👉 插件 | Vue.js 3.x

一个插件可以是一个拥有 install() 方法的对象,也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数:

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏