@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 属性。
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');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');安装后,插件执行以下操作:
RouterLink 和 RouterView 在所有模板中可用,无需显式导入$router 和 $route 为响应式属性,可通过选项式 API 中的 this.$router 和 this.$route 访问globalProperties)