场景模拟

  • 情景一:

AB页面，A是提交信息页面，B是结果页
A提交完信息后，动态渲染出B，当B页面渲染出来后，再次刷新页面，就会显示A页面，但是希望显示B页面。

  • 场景二

视频列表的播放
点击视频列表后，应该更改页面的url参数，但是不立即刷新页面，而是在随后的刷新，刷新点击后的页面

https://developer.mozilla.org/zh-CN/docs/Web/API/History
csdn
利用HTML5的history.replacestate()修改当前页面的URL

  1. function changeURLParam(name, value) {
  2.   var url = document.URL,
  3.     resultUrl = ''
  4.   var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  5.   var r = window.location.search.substr(1).match(reg)
  6.   var replaceText = name + '=' + value
  7.   if (r != null) {
  8.     var tmp = url.replace(unescape(name + '=' + r[2]), replaceText)
  9.     resultUrl = tmp
  10.   } else {
  11.     if (url.match('[?]')) {
  12.       resultUrl = url + '&' + replaceText
  13.     } else {
  14.       resultUrl = url + '?' + replaceText
  15.     }
  16.   }
  17.   history.replaceState(null, null, resultUrl)
  18. }
  19. changeURLParam('video_id', currentVideoId)
  21. //----
  22. var stateObject = { result: true }; //可以传递参数
  23. var title = "Wow Title";
  24. var newUrl = location.href;
  25. history.replaceState(stateObject, '', newUrl);
  26. console.info('history', history);
  29. ## 对于vue
  30. this.$router.replace({ query: { ...this.$route.query, token: '1111' } })