单页应用history路由改造

2019年9月15日 121次阅读 来源: zimoon

需求

调用其它团队流量站埋点统计时会截取锚点#，导致单页应用分页面流量分析获取不到数据。而本项目迫切需要按菜单、特殊功能模块统计流量情况，等不及流量站的团队开发升级版，于是选择改造项目路由为hostory模式。

单页应用路由实现思路

SPA，只加载一个HTML，页面在用户与应用程序交互时动态更新该页。即理论上来说，只需加载一次页面就可以不再请求（首屏耗时过长需按模块chunk，预加载css，按需加载js），当点击其他子页面时只会有相应的URL改变而不会重新加载。

这种情况下实现路由的过程分为两部分:

  1. 更新URL页面不刷新
  2. URL变化时执行页面替换逻辑

现在主流有2种实现方式:

  1. history.pushState等触发popstate事件
  2. location.hash的变化触发hashchange事件

vue-router中提供了三种方式HTML5History（判断是否支持）、HashHistory、AbstractHistory（用于Node环境，因为不涉及和浏览器地址相关记录关联在一起；整体流程依旧和 HashHistory 是一样的，只是这里通过数组来模拟浏览器历史记录堆栈信息）

默认为Hash模式，组件(components)映射到路由(routes)，registerHook设置守卫入栈，在每次跳转的时候，递归守卫集合，将触发的守卫进行解析和执行。

vue-router源码阅读

实现过程 & 踩坑记录

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路由改造》

原因：在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，开始报语法错误

报错如下
《单页应用history路由改造》
DOM情况：
《单页应用history路由改造》
资源情况：
《单页应用history路由改造》

原因：修改为history模式后，相对定位不再适用，资源会根据当前刷新路径变更访问路径（注意上图资源情况访问的文件夹）。在此项目中静态资源vendor.dll.的引入路径有问题，需将相对路径’./’修改为绝对路径’/’
《单页应用history路由改造》

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;
   ...
}

前端小菜鸟一枚，如表述有误，恳请各位大神指正～

    原文作者：zimoon
    原文地址: https://segmentfault.com/a/1190000017417770
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞