单页应用history路由改造
需求
调用其它团队流量站埋点统计时会截取锚点#，导致单页应用分页面流量分析获取不到数据。而本项目迫切需要按菜单、特殊功能模块统计流量情况，等不及流量站的团队开发升级版，于是选择改造项目路由为hostory模式。
单页应用路由实现思路
SPA，只加载一个HTML，页面在用户与应用程序交互时动态更新该页。即理论上来说，只需加载一次页面就可以不再请求（首屏耗时过长需按模块chunk，预加载css，按需加载js），当点击其他子页面时只会有相应的URL改变而不会重新加载。
这种情况下实现路由的过程分为两部分:
- 更新URL页面不刷新
- URL变化时执行页面替换逻辑
现在主流有2种实现方式:
- history.pushState等触发popstate事件
- location.hash的变化触发hashchange事件
vue-router中提供了三种方式HTML5History（判断是否支持）、HashHistory、AbstractHistory（用于Node环境，因为不涉及和浏览器地址相关记录关联在一起；整体流程依旧和 HashHistory 是一样的，只是这里通过数组来模拟浏览器历史记录堆栈信息）
默认为Hash模式，组件(components)映射到路由(routes)，registerHook设置守卫入栈，在每次跳转的时候，递归守卫集合，将触发的守卫进行解析和执行。
实现过程 & 踩坑记录
1. Router传入配置项，设置mode为'history'
export default new Router({ mode: 'history', routes })2. 开发模式下，webpack 热启动配置 history 模式
webpack属性中historyApiFallback默认能将当前找不到的目录重定向到主目录默认index.html。
在 webpack 配置文件的devServer配置，将url重写到自己配置的目录：
// webpack.dev.conf.js
devServer: {
...
historyApiFallback: {
rewrites: [
{ from: /.*/, to: '/index.html' }
],
},
...
}3. 部署预发后，刷新时资源404
开发过程一切正常，直到编译打包发布。
状况：从域名点击菜单能正常跳转，但刷新当前页会报错404。（Eg：从test.com点击访问/111正常，但直接访问test.com/111报404）
原因：在History mode下，直接通过地址栏访问url会被http server直接解析到该文件路径，但是spa的路由是虚拟的，并不能直接找到这个file，所以会404。
解决思路：如果URL匹配不到任何静态资源，就跳转到默认的index.html，让router去解析url， nginx中需要配置try_files。
# 当前项目使用了第一级'/'来区分产品，所以这里匹配metric、stocktake
# 一般直接'location ~ /'即可
location ~ ^(/metric|/stocktake) {
try_files $uri $uri/ /index.html;
}具体配置官方提供了：其它服务器配置
4. 页面不再404，开始报语法错误
报错如下
DOM情况：
资源情况：
原因：修改为history模式后，相对定位不再适用，资源会根据当前刷新路径变更访问路径（注意上图资源情况访问的文件夹）。在此项目中静态资源vendor.dll.的引入路径有问题，需将相对路径'./'修改为绝对路径'/'
5. 页面正常加载，但后端接口被统一重定向
原因：step3时在nginx处配置了try_files 加上后端接口也是/metric、/stocktake开头。于是就不幸地被nginx匹配到规则统一作跳转处理了。
解决：区分接口与页面。在项目中统一对后端接口加'/api/'，nginx新建规则匹配'/api/'并作相应跳转。
// 在发请求的公共方法处添加'/api/'
function ajax(url, type, params, opt = '') {
return Q.Promise((resolve, reject) => {
const config = {
method: type === 'get' ? 'get' : 'post',
// TODO: '/api/'暂时作为nginx区分重定向的匹配字段 待与兆华协商统一 不与路由命名重复
url: C.HOST + '/api/' + url,
params: type === 'get' ? params : null,
data: configData(type, params, opt)
}
axios(config).then(checkStatus).then(checkCode).then((response) => {
resolve(response)
}).catch((err) => {
console.log(err)
if (err.msg) Notice(err.msg)
reject(err)
})
})
}nginx中添加如下匹配规则并重写url
```
# 后台三类开头对应请求不同服务器
location ~ ^/api/system/ {
rewrite ^/api/(.*) /$1 break;
proxy_pass http://assets-api-yf.jd.com;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ ^/api/metric/ {
rewrite ^/api/(.*) /$1 break;
proxy_pass http://metrics-api-yf2.jd.com;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ ^/api/stocktake/ {
rewrite ^/api/(.*) /$1 break;
proxy_pass http://meta-api-yf.jd.com;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
```6. 切换产品菜单时会刷新
因为使用的是window.location，替换成this.$router.push即可
7. 非法输入路由时，未正常重定向到首页，直接404
状况：地址栏输入test.com/ffsdfdsge，显示'404 Not Found'，并未重定向到首页。
解决：nginx配置error_page。
server {
...
error_page 404 /index.html;
...
}前端小菜鸟一枚，如表述有误，恳请各位大神指正～