BaseHref 以及前端路由的问题

BaseHref 以及前端路由的问题

Base Href 是什么？

• MDN,
• 说的直白一点就是，这个站点里面所有的访问主站的资源文件，都会在路由前面加上这个base href,包括*js,scss,image,ajax,......**。
• 如果一个DOM 里面有多个这样的base,只有第一个会起作用。

BaseHref 在Angular 工程的编译中有什么影响？

• 我们注意到在angular.json中有这个Options.baseHref配置，在编译命令中也有ng build --base-href的参数。这个参数记得一定要以/开头，也以/结尾。这个参数其实就是往编译好的index.html中插入base节点。
• 除此外，也会影响前端的路由。如何影响呢，我们举例子来说明。

例子如下

• 假设我们的主站是http://site.com
• 我们的baseHref 设的是/myapp/,
• Angular 中拥有两种路由策略一个是PathLocationStragety,另一个是HashLocationStragety,这两个的区别是，后者是通过#来区分前端路由跟后端路由。而前者则没有这个区分。默认是前者。
• 更具体的说就是如果是PathLoationStragety,路由则是 http://site.com/myapp/route1, 而后者则是http://site.com/myapp/#route1.
• 除此之外，还要一个APP_BASE_HREF,这个又是什么，直接举例子，如果它设置为prefix,则路由会是,http://site.com/myapp/prefix/route1 vs http://site.com/myapp/#/prefix/route1. 而且这个prefix 的添加是angular 负责的。对我们的js 代码是无感的。
• 很多时候，我们不喜欢/myapp/，我们更希望路由是 http://site/route1, 那么该怎么做呢。
• 我们得配合后端的MVC 来实现。首先我们的baseHref 还是/myapp/, 我们先设置App_BASE_HREF为/, 然后在我们后端的MVC页面中，我们要为我们的所有前端路由配置一个路由，使得它命中到我们一个固定的View，在这个View里面我们可以使用 View("~/myapp/index.cshtml"),这个index.cshtml其实就是我们前端编译好的index.html重命名而来。当然，我们还得在myapp文件夹下面添加一个web.cofig, 这个是从我们的View文件夹下复制过去。
• 注意点，通过测试，目前只有PathLocationStragety可以成功，HashLocationStragety没有成功，不知道为什么。其次，一定要将前端路由配置到MVC的路由中去，并且必须命中返回index.cshtml的那个View, 否则，当我们在前端某个deep link 下刷新会报404.