有时候，一个组件比较复杂的时候，想要重置它的状态，如果一条一条的语句去写，未免太累，或许可以用更 递归 的方式来快速重置状态，即路由重载。

就比如现在路由是 /user 对应组件 User，它的功能主要是：

展示用户的资料
让用户修改

那么在用户修改好资料并成功调用接口更新了后台数据之后，对于重新渲染用户资料的途径有两种选择：

重新走一次 Created
销毁 User 然后重新进入一次 User

其实从工程的角度来说，重新走一次 Created，重新初始化组件或许更好，不过如果组件状态复杂，总会有种 没有明显 BUG 的感觉。
而从编程美学的角度来说，重载就字面而言极具 递归 感，编程者不得不确信：只要前面代码没有问题，那么重载亦绝无问题。这是一种 明显没有 BUG 的感觉。

# 路由重载 ↵

其实重载是一个很常见的需求，很多地方都有用到，除了上述的这个之外，还有一些需要轮询的场合使用重载其实也非常不错，而实现一次重载是比较容易的。

甚至可以使用 location 上的 reload 方法去实现：

00location.reload()

不过这个方法等同于 F5 刷新，会造成不必要的通信开销。

在 Vue-Router 下，可以调用如下方法实现路由重载，这种重载不会造成多余的通信开销。

00this.$router.go(0);

下面这种方式与上面几乎一样：

00// 2 
01this.$router.go({
02    path: '/user',
03    query: {
04        id: 'xxxx'
05    }
06})

# 重载引发的问题 ↵

看本文标题所谓 引发的问题 应该是音频的问题，的确如此。

在 iOS 本身的浏览器策略下，音频是不能自发的播放的，就是你不能直接的调用 audio.play 来播放它，而是要通过交互来播放，比如在点击事件的 handler 里面调用。

那么问题来了，如果就是要在页面 onload 的时候自动播放呢？

那显然在点击事件里面再播明显不可取，这是一个世界性难题。

微信显然是注意到这些了，微信浏览器提供了一些额外的特性可以保证自动播放的进行，比如可以在调用 wx.config 之后通过 wx.ready 指定回调的里面播放，此法可以很正常的播放。

还有就是使用微信提供的事件 WeixinJSBridgeReady 里面的回调来播放。

00function play(){
01    let $music = $('#mp3'); 
02    $music.play();
03}
04
05// 1. 利用 config 
06wx.config(xxxxx); 
07wx.ready(function(){
08    play(); 
09})
10
11// 2. 利用 WeixinJSBridgeReady 事件 
12document.addEventListener('WeixinJSBridgeReady', function() {
13     play(); 
14});

这样看来似乎问题都解决了，可是实测发现在路由重载之后，第二次的音频却不会自动播放了，只有在第一次需要自动播放音频的时候，上面的方法才会生效。

多方搜索才找到另外一种方式去实现任意音频的任意播放，即调用 WeixinJSBridge 的 invoke 的方法，然后顺便播放一下音频

00// 微信 jssdk api 
01// 获取网络信息 
02// 3. 利用 WeixinJSBridge 实现某种交互从而骗过浏览器 
03WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
04    $music.play(); 
05});

显然，WeixinJSBridge应该如字面所言是微信和浏览器的桥，负责交互通信，实质上就是一种事件，从而骗过 iOS 成功播放。