本篇,只在umi项目非常熟练的情况下,如不清楚,可去umi官方文档了解。

一,需求:

1号地址:http://abc.abc.com/aaa
众所周知umi项目要部署在非根目录下,配置base必须为某个目录,即base:'/aaa/'
进入项目后,路由会自动以‘/aaa’为前缀,跳转正常,
例如:
(1)点击‘关于我们’,会路由到http://abc.abc.com/aaa/about

二,需求变更

2号地址:http://abc.abc.com/bbb 
服务端配置代理,使2号也指向同一umi项目,并也要保证进入项目后,能正常
当然我们什么都不做,现象将是:
(1)访问http://abc.abc.com/bbb正常
(2)点击‘关于我们’,会路由到http://abc.abc.com/aaa/about
此时问题出现了,没有达到我们预期,会路由到http://abc.abc.com/bbb/about

为什么呢?

因为,配置中base已经配置为'/aaa/',umi项目会以此为前缀进行路由

三,解决思路

排查代码后发现,umi打包编译后的index.html文件中head里会有:

<script>window.routerBase = "/aaa/";</script>

其实此routerBase就是来自于配置base,也是项目运行后,路由要识别的基准前缀

四,处理方案

既然umi会自动生成一个window.routerBase变量,那是否我们可以手动指定覆盖呢,
答案是:可以!

在head之后,例如body中,增加:

<script>window.routerBase = window.location.pathname.split('/')[1];</script>

动态获取url中的对应路径,动态赋值为:'/aaa/'或'/bbb/',甚至以后ccc,ddd均不是问题。
当然,你的项目可能还需要区分本地开发环境和生产环境,自己在这里加判断咯,
例如:

<script type="text/javascript">window.routerBase = window.routerBase=='/'?'/':window.location.pathname.split('/')[1];</script>

小小的问题,往往会启发出宽广思路!

标签: umi, 路由, 非根目录, routerBase, umi配置

添加新评论

选择表情