问题
这两篇文章：
会产生bug：
-
切换顶部项目下拉框时，
projectId改变了，但是appId没有改变，这会导致接口报错。
-
页面加载来源应该有两个，而不是单个：
projectId和appId任意一个改变时，且都有值时，应该加载页面。
解决方案
针对 bug1：顶部项目下拉框切换时，默认选中左侧第一个动态菜单项。
注意：此处的数据加载顺序：
- 切换顶部项目下拉框、跳转路由（改变
projectId） - 触发
App.vue中projectId全局监听器 - 请求项目菜单路由(
Vuex中根据projectId请求接口获得appList，并生成对应的动态路由并渲染动态菜单)
因此，应该在第3步之后，更改路由地址中的appId为appList中第一条数据的appId
因此，需要用到Vuex。
Vuex 代码：判断是否切换了顶部项目下拉框
渲染动态路由后，跳转到正确的路由
针对 bug2：深度监听由 projectId 和 appId 组成的对象。
注意：此处在组件内监听该对象，切换或刷新会多次触发监听事件，与预期不符。应该在 App.vue 中监听。【原因尚不明确】
因此，可利用 Vuex 实现。
Vuex 代码
App.vue 中监听对象
组件中加载页面
总结
- 判断数据的加载顺序和时机；
- 监听多个数据，用对象；
- 在 Vuex 中跳转路由：先引入 router，再使用
router.push()； router.app._route可在 Vuex 中获取当前路由；- Vuex 中不同模块之间互相使用数据，可在 actions 中函数第一个参数中传入
rootState。 - 注意：使用
commit('actionsName'， payload, {root: true})可调用另一个模块的 actions 函数，其中第一个参数为函数名，不是 stateName。