logo
  • 指南
  • API
  • 博客
  • 简体中文
    • 简体中文
    • English
    • @esmx/core
      Esmx
      App
      RenderContext
      ModuleConfig
      PackConfig
      ManifestJson
      @esmx/router
      Router
      Route
      路由配置
      RouterLink
      导航守卫
      动态路由匹配
      嵌套路由
      编程式导航
      滚动行为
      图层路由
      微应用
      错误类型
      类型参考
      @esmx/router-vue
      RouterPlugin
      组合式函数
      组件
      类型增强
      @esmx/router-react
      微应用集成
      Hooks 与上下文
      组件
      SSR
      App
      @esmx/rspack
      @esmx/rspack-vue
      @esmx/rspack-react

      最后更新于: 2026/4/7 02:16:07

      上一页类型参考下一页组合式函数

      #RouterPlugin

      #简介

      @esmx/router-vue 为 @esmx/router 提供 Vue 集成,提供插件、组合式函数和组件,实现 Vue 2.7+ 和 Vue 3 应用中的无缝路由。RouterPlugin 是将路由注册到 Vue 应用的入口。

      #类型定义

      const RouterPlugin: {
          install(app: unknown): void;
      };

      Vue 插件,全局注册 RouterLink 和 RouterView 组件,并在 Vue 实例上设置 $router 和 $route 属性。

      #安装

      #Vue 3

      import { createApp } from 'vue';
      import { Router } from '@esmx/router';
      import { RouterPlugin, useProvideRouter } from '@esmx/router-vue';
      
      const router = new Router({
          routes: [
              { path: '/', component: Home },
              { path: '/about', component: About }
          ]
      });
      
      const app = createApp({
          setup() {
              useProvideRouter(router);
          }
      });
      
      app.use(RouterPlugin);
      app.mount('#app');

      #Vue 2

      import Vue from 'vue';
      import { Router } from '@esmx/router';
      import { RouterPlugin, useProvideRouter } from '@esmx/router-vue';
      
      const router = new Router({
          routes: [
              { path: '/', component: Home },
              { path: '/about', component: About }
          ]
      });
      
      Vue.use(RouterPlugin);
      
      new Vue({
          setup() {
              useProvideRouter(router);
          }
      }).$mount('#app');

      #行为

      安装后,插件执行以下操作:

      1. 注册全局组件:RouterLink 和 RouterView 在所有模板中可用,无需显式导入
      2. 设置实例属性:配置 $router 和 $route 为响应式属性,可通过选项式 API 中的 this.$router 和 this.$route 访问
      3. Vue 2 兼容:自动检测 Vue 版本并应用相应的设置机制(Vue 2 使用原型增强,Vue 3 使用 globalProperties)