企业官网建设流程全解析

Umi 项目如何接入 Vue 编写 .vue 页面与配置路由

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi

如果你的 Umi 项目里需要加入用 Vue 编写的.vue页面，而不是全部使用 React，官方提供的接入方式是安装@umijs/preset-vue预设并在 Umi 配置中启用它。接入后，你可以按约定式路由或配置式路由的方式组织.vue页面文件，使用vue-router的命名路由、重定向、别名等能力，并通过app.tsx中的运行时配置控制vue-router。官方文档说明 Umi Vue 大部分配置和 React 相同，使用 Vue 一文只列出 Vue 独有的配置，本文按“安装 → 启用预设 → 写页面 → 配路由 → 运行验证”的顺序走一遍完整路径。

安装 @umijs/preset-vue 并启用预设

在 Umi 项目中安装预设：

pnpm add @umijs/preset-vue -D

然后在.umirc.ts或config/config.ts中通过presets配置启用：

// .umirc.ts or config/config.ts 中 export default { presets: [require.resolve('@umijs/preset-vue')], };

这就是接入 Vue 的全部必需配置。仓库中 packages/preset-vue/package.json 显示该预设依赖vue 3.2.45、vue-router 4.1.6和vue-loader 17.0.1，即官方支持的是 Vue 3 技术栈。

编写 .vue 页面

启用预设后，.vue文件与 React 页面一样参与约定式路由。可以参考仓库中的示例项目 examples/boilerplate-vue，其pages/目录下就是.vue页面文件，例如 pages/index.vue：

<template> <h1>Hello Vue + UmiJs</h1> </template> <script lang="ts" setup> import { onMounted, ref } from 'vue'; </script>

示例中的 pages/list/$id.vue 展示了动态参数页面，用$前缀的文件名声明动态路由，页面内通过useRoute取参数：

<template> <h3>List Detail</h3> <div>id: {{ route.params.id }}</div> </template> <script lang="ts" setup> import { useRoute } from 'umi'; const route = useRoute(); </script>

注意useRoute、useRouter等从umi导入，而不是从vue-router导入。示例项目pages/下同时存在.vue、.tsx页面（如 pages/demo-jsx/index.tsx），说明两种技术栈可以在同一个项目里并存。

配置路由：name、redirect 与 alias

约定式路由之外也可以用routes做配置式路由。官方文档强调这部分“仅列出和 React 路由配置差异部分”，即 Vue 相比 React 多出来的配置项是name、redirect、alias。

命名路由 name

除了path，可以为任何路由提供name：

export default { routes: [ { path: '/user/:username', name: 'user', component: 'index' } ] }

链接到命名路由时，向router-link的to属性传递对象：

<router-link :to="{ name: 'user', params: { username: 'erina' }}"> User </router-link>

命令式调用效果一致：

router.push({ name: 'user', params: { username: 'erina' } })

两种方式都导航到路径/user/erina。

重定向 redirect

重定向同样在routes中配置，下面的例子是从/home重定向到/：

export default { routes: [ { path: '/home', redirect: '/' } ] }

重定向目标也可以是命名路由：

export default { routes: [ { path: '/home', redirect: { name: 'homepage' } } ] }

别名 alias

访问/home时 URL 被替换为/再匹配，这是重定向；而别名是访问/home时 URL 仍保持/home，但按/进行匹配：

export default { routes: [ { path: '/', component: 'index', alias: '/home' } ] }

别名可以结合嵌套路由使用，用一个数组提供多个别名：

export default { routes: [ { path: '/users', component: 'users', routes: [ // 为这 3 个 URL 呈现 UserList // - /users // - /users/list // - /people { path: '', component: '/users/UserList', alias: ['/people', 'list'] }, ] } ] }

页面内跳转与 router 组件

在.vue页面中跳转，从umi导入useRouter和useRoute：

<script lang="ts" setup> import { useRouter, useRoute } from 'umi'; const router = useRouter() const route = useRoute() const onHello = () => { router.push({ name: 'search', query: { ...route.query, }, }) } </script>

router-link与router-view直接按vue-router的用法使用即可，官方文档将两者细节指向 vue-router 的 Composition API 指南，本文不再展开。

运行时配置：在 app.tsx 中控制 vue-router

可以通过约定的src/app.tsx中的 export 来控制vue-router相关的配置，仓库中的 examples/boilerplate-vue/app.tsx 是一个完整参考。

router：修改路由配置

// src/app.tsx export const router: RouterConfig = { // @ts-ignore scrollBehavior(to, from) { console.log('scrollBehavior', to, from); }, };

onMounted({ app, router })

Vue app mount 成功后的回调，可以拿到app实例与router实例，用于全局组件注册、路由拦截器等：

export function onMounted({ app, router }: any) { app.provide('umi-hello', { h: 'hello', w: 'word', }); }

示例项目在这里注册了router.beforeEach拦截器：

export function onMounted({ app, router }: any) { // @ts-ignore router.beforeEach((to, from, next) => { console.log('router beforeEach', to, from); next(); }); }

rootContainer(container)

修改交给vue-router渲染时的根组件，比如在外面包一个父组件：

import { h } from 'vue' export function rootContainer(container) { return h(ThemeProvider, null, container); }

运行与验证

示例项目 examples/boilerplate-vue/package.json 定义了常用脚本：

npm run dev # 对应 umi dev npm run build # 对应 umi build npm run preview # 对应 umi preview --port 6070 npm run setup # 对应 umi setup

tsconfig.json继承./.umi/tsconfig.json，即类型信息由umi setup/ 编译过程生成，接入后如需补全类型提示可以执行setup脚本。

功能验证可以参考示例项目自带的 Cypress 用例 cypress/e2e/smoke.cy.ts，它通过启动开发服务器后断言页面内容来确认.vue页面被正确渲染（以下断言来自该示例项目的测试代码，是示例项目自身的校验项，不代表你项目中必须出现的文本）：

• 访问/后断言页面包含Hello Vue + UmiJs、mock 接口返回的{"a":1；
• 断言 layout 导航栏包含Home、Docs、About、List等链接；
• 点击导航后断言对应.vue页面（如About Page、ListPage）渲染成功。

执行入口为示例项目的e2e脚本（cypress run），前置条件是dev脚本启动的开发服务器可用，e2e:ci脚本则通过start-server-and-test等待http://localhost:5071/__umi/api/status就绪后再跑测试。

可选分支与其他 Vue 相关示例

• 需要状态管理时，examples/with-vue-pinia 展示了在预设基础上叠加pinia（依赖pinia ^2.0.28+vue 3.2.45）的完整项目结构，脚本同样是umi dev/umi build/umi setup；
• 需要组件库时，examples/with-vue-element-plus 提供了基于 Element Plus 的 Vue 页面示例。

以上示例项目均只依赖umi+@umijs/preset-vue加各自的 Vue 生态包，接入方式与正文一致：安装预设、启用presets、在pages/下写.vue页面，其余 Umi 配置（mock、layout、约定式路由等）与 React 项目相同。

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi