解决vue组件化高，逻辑密集时的路由控制

背景：

项目是接手其他人的项目，在组件化非常密集的项目，并且逻辑都集中在这些组件里，问题的关键在于并没有使用好路由来控制导航，而项目全是控制组件的显示，隐藏，所有的逻辑都发生在这一个url里，

这个项目是h5嵌套到了原生APP里，话说原生可以通过桥接的方法给h5提供方法，但是原生端不是我们公司，正式大名鼎鼎的华为，人家才不会给你提供呢，人家还让你隐藏自己有所得返回键，只让他原生端的返回键出现。

所以出现了极大问题，就是他的物理返回键非常不匹配我们的组件显示和隐藏！！！，怎么办，怎么办，着急，在线等。。。。。。。。。

解决方案1：

我还是把组件之间进行抽离吧，通过路由导航，但是，里面的逻辑咋弄，一个方法上百行，谁看谁恶心，，，，，，，

解决方案2:

还好咱们h5能有向histroy增加记录的方法啊！容我去别的地方ctrl+c，ctrl+v一点API

history.pushState(stateObject, title, url);

　　history.pushState()主要是在不刷新浏览器的情况下，创建新的浏览记录并插入浏览记录队列中。

1、状态对象（stateObject）—— stateObject是一个JavaScript对象，通过pushState方法可以将stateObject内容传递到新页面中。

2、标题（title）—— 几乎没有浏览器支持该参数，但是传一个空字符串会比较安全。

3、地址（url）—— 新的历史记录条目的地址（可选，不指定的话则为文档当前URL）。

一：我们可以在控制组件进行显示的（出现的）时候，给她来个加上：（具体参数你自己设置就好）

if(history.pushState){
  history.pushState({good:'good'},'')
  console.log('history.pushState成功===================================================================')
}

这样你就在你想要不刷新的情况下，history里增加了一条原地踏步的记录。

二：第一步还是只是往里增加了历史记录，第二部就需要对物理返回+后退进行监听

popstate事件能够监听

if(history.pushState){
  window.addEventListener('popstate',function(e){
  console.log(e)
  //console.log('点击后退了！')
   if(e.state.good ==='good'){
     写下你要做的事情
     location.reload();
     console.log('reload--------------了')
   }
  })
}

当然我这些代码只是我自己的需求，这个popstate无法知道是前进，还是后退，所以只是通过你忘事件里添加的state对象来判断是否是你的那些逻辑，反正我自己的问题解决了，不需要我用第一种方案去解决我就欢天喜地了，

当然，如果您有好的解决办法，请分享给我哦！