場景描述

很多時候，我們需要做到簡單的路由攔截，比如用戶未登錄的時候，我們需要跳轉到登錄頁面，等到用戶登錄后在重新跳轉到之前的頁面，而很多情況下這些是約定式路由無法完成的，就需要我們配置式路由

論述

umi自帶的約定式路由，可以自動的生成路由文件(運行時，生成.umi/core/router.ts中),而使用約定式路由的時候，不需要我們在.umirc.ts中去添加route項，相反，也就是說,如果我們要啟用配置式路由的時候，我們需要動態的去配置routes項，如下

import { defineConfig } from 'umi'; import routes from './src/routers/index';export default defineConfig({routes: routes,nodeModulesTransform: {type: 'none',},dva: {immer: true,hmr: false,},antd: {compact: true,},chainWebpack(config) {}, });

在上面的代碼中，配置了使用routes，而文件的引入，為求方便，一般都是額外抽一個文件出來，專門用于路由的管理

該文件的代碼如下：

import user from './user'; const router = [{ exact: true, path: '/', redirect: '/info' }, ...user];export default router;

由于有不同的模塊，所以這兒式采用不同模塊的方式引入，這樣比較方便管理，下面用user模塊作為例子

const userRouter = [{path: '/register',exact: true,component: '@/pages/user/register/index.tsx',},{path: '/info',exact: true,component: '@/pages/user/info/index.tsx',}, ]; export default userRouter;

這兒需要注意的幾點是：第一，雖然頁面都是放在user目錄下，但是兩個都是屬于一級路由，不要搞混了。第二，在寫組件路徑的時候，有兩個注意點，一個是根據pages文件夾去確定文件的路由。另一個是注意寫上你文件的格式，為何，因為最后生成路由的時候，都是require引入，所以最好寫上完整一點的，加上文件后綴(當然，不加的話umi也會自動幫你補全，為了新手看起來清楚點，我這兒就把他加上去，后面的博客就會刪除掉)，最后，@/pages/xxx是webpack的alias配置，不懂的不做出回答

最后生成的路由文件

// @ts-nocheck import React from 'react'; import { ApplyPluginsType } from 'D:/workspace/umiBlock/node_modules/_@umijs_runtime@3.2.24@@umijs/runtime'; import * as umiExports from './umiExports'; import { plugin } from './plugin';export function getRoutes() {const routes = [{"exact": true,"path": "/","redirect": "/info"},{"path": "/register","exact": true,"component": require('@/pages/user/register/index.tsx').default},{"path": "/info","exact": true,"component": require('@/pages/user/info/index.tsx').default} ];// allow user to extend routesplugin.applyPlugins({key: 'patchRoutes',type: ApplyPluginsType.event,args: { routes },});return routes; }

其次，關于路由攔截還有二級路由的，下回再補充

備注

ts以及js都是類似的環境，文件也沒多大變化，具體可以看文檔，文件也都是那么幾個

資料來源

umi-路由文檔

總結

以上是生活随笔為你收集整理的umi:配置式路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。