业务需求
在做一个管理用户账户下APP的网站，在主页需要切换应用APP的ID，来显示不同APP对应的数据，对不同APP进行操作。
实现方案
由于切换APP对应的是整个页面的更新，考虑通过将APPID直接作为URL参数，切换时，变更URL地址后的APPID，对应页面数据通过URL参数进行请求。此时需要维护一个全局变量存储这个APPID，于是利用了VUEX全局状态管理。
页面中由三部分组件组成，headerBar，sideBar，MainContent。通过headerBar下拉列表选择appName切换appId，此时将appId存储到VUEX维护的变量commandState中，在headerBar组件中监听commandState的变化，变化后切换URL地址并携带请求参数（commandState的值）。
'$store.state.commandState': {
handler: function (val) {
this.$router.push({
path: '/console/app/info',
query: {
appid: val
}
});
}
}
注意此处存在一个小问题，如果给监听器配置immediate:true，首次请求的URL参数为空值。具体原因还在排查，初步考虑是commandState的值没有变化导致切换路由URL的参数为空。（所以不在这里进行初次加载的监听）
sideBar中是供用户进行MainContent内容切换的菜单，用户可以通过选择菜单项切换对应APPID的MainContent内容。在sideBar中做了commandState和$route(路由)监听，通过监听commandState的值来进行URL变更。
'$store.state.commandState': {
handler: function (val) {
this.defaultAppId = val;
}
},
'$route'(to) {
this.$router.push({
path: to.path,
query: {
appid: this.defaultAppId
}
});
}
遇到的问题
URL地址变化以后，当前页面的数据并没有随着参数APPID的变化而变化，在sideBar做切换的时候数据可以正常通过URL的参数进行请求并获取。
问题定位以及解决
当前的路由页面组件进行了复用，数据和内容没用重新加载。
网上的办法大多是以下几种：
- 给增加一个不同:key值，这样vue就会识别这是不同的了，然后就会进行组件的重载，钩子函数也会如期执行。
- 给增加一个不同v-if值，来先摧毁，然后再重新创建起到刷新页面的效果。解决路由切换，页面不更新的实用方法
- 让整个页面刷新达到页面重载的效果，此时需要用本地存储来记录VUEX中的commandState。vue单页面应用刷新网页后vuex的state数据丢失的解决方案
说一下自己走过的坑，我在之前处理sideBar切换路由时已经使用到了<router-view :key="key"></router-view>，只不过我的key是$route.path，在sideBar切换确实取消了组件的复用，然而却疏忽了参数APPID不同的问题，然后我改成了$rotue.fullpath，它是将整个url地址进行匹配，这样就解决了复用的问题，实现页面更新。
而且在踩着个坑的同时，我还试图直接使用$router.go(0)，企图刷新以后重新加载，后来才发现，commandState早已恢复初始值。接下来我考虑使用H5的本地存储做一下尝试，不过这种方案是备选。