vue.js 如果手动键入URL,则app.MapFallbackToFile将导致重新加载整个SPA站点

anauzrmj  于 2023-01-17  发布在  Vue.js
关注(0)|答案(1)|浏览(205)

我使用了最新的基于recommended SPA +. Net Core的Web APi模式,其中FE引用BE,FE在开发期间充当BE的代理,app.UseDefaultFiles()在生产期间充当SPA所在的index.html。这种模式意味着不需要代理中间件,因为BE充当FE代理时,代理中间件的方向相反。

app.UseDefaultFiles(); <-- Here the site is loaded first time
app.UseStaticFiles();
app.MapControllers();
app.MapFallbackToFile("/index.html"); <-- Here the site is reloaded if URL typed(changed) manually

客户端路由是重点,具体我用Vue路由器和IIS托管,当站点已经打开,用户在浏览器中输入URL,就落到app.MapFallbackToFile("/index.html"),然后Vue路由器处理路由。
问题是,在这种情况下,当URL刚刚更改(比如从www.example.com更改为mysite.com/b)时,站点总是完全重新加载,因为我会按F5。这不一定总是不好的,但我希望控制它。mysite.com/a to mysite.com/b) in this scenario, as I would press F5. It's not always necessarily bad but I would like to control it.
问题是:如何摆脱app.MapFallbackToFile("/index.html")并以某种方式将捕获的URL传递给SPA,因为它将是没有后端的裸SPA,而后端现在位于前端前面。

ktca8awb

ktca8awb1#

如果尝试过Vue Spa与ASP.NET核心6最小设置,对我来说似乎没有办法实现你想要的。
当用户输入或更改URL地址时,浏览器将离开页面并向BE(后端)发出GET请求。以下是所需的catch-all fallback route,否则用户将从Web服务器获得404错误。
我想你用的是HTML5 History Mode。下面是Vue路由器文档中关于这个问题的一部分。
由于我们的应用是单页客户端应用,没有适当的服务器配置,如果用户直接在浏览器中访问https://example.com/user/id,就会收到404错误。
不用担心:要解决这个问题,您只需向服务器添加一个简单的全覆盖回退路由。如果URL与任何静态资产都不匹配,它应该服务于您的应用所在的index.html页面。
如果有人知道答案,请发布一个新的答案。
如果知道怎么做就太好了!

相关问题