单页应用经常会采用 url 的 hash(锚点) 来实现路由机制，当然这种方式的确是一个有效的方式，但是在很多人会对 url 出现 hash 产生不好的感觉。H5 history 新 API 的出现，让浏览器地址栏的 url 改变而不刷新页面。
像 Angular 这样的框架，内部已经实现了 H5 模式的路由方式，只需要在 config 中设置 $locationProvider.html5Mode(true) 即可完成 url 变化而不会刷新页面。但是会存在一个问题，当路由到某一个页面时，由于本身没有这个页面，导致刷新浏览器去访问这个 url 时出现找不到该页面的错误。
当然，这种问题我们可以通过 Nginx 将 404 状态的路由都转发到首页，这样就解决了刷新找不到页面的问题。
解决步骤：
修改 Angular 应用的路由为 H5 模式：
var app = angular.module("app", [...]);
app.config(["$locationProvider", function($locationProvider){
$locationProvider.html5Mode(true);
...
}]);
在页面中增加 base url
<html>
<head>
<base href="/" />
</head>
</html>
将 Angular 应用中的所有内部跳转改为 Angular 封装好的跳转：
- 页面上的链接跳转采用
ng-ref； - 如果采用第三方 ui-router 的话，页面链接跳转采用：
ui-sref； - 模块内部的跳转采用
$state.go，例如在Controller中跳转；
配置 Nginx 将 404 状态的路由都转发到首页：
location / {
root /path;
index index.html index.htm;
# 注意，‘ =404’ 前面必须有空格！
try_files $uri $uri/ /index.html =404;
}
这样一来，Angular 单页应用就可以去除 # 并且每个路由都可以直接进入正确的页面。再加上 Prerender 服务，会让网站的 SEO 更佳友好。
最后
当然这样的技巧我们也可以用在当前流行的前端框架，例如：Vue、React 等。当然 Prerender 技术相对挪活，现在的前端框架已经支持了 SSR（服务器端渲染）技术。良好的利用 Nginx 对我们的网站系统有非常好的帮助。
网友评论