切换项目后,默认选中第一个菜单项
问题
这两篇文章:
会产生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。
参考链接
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/17535539.html
posted on 2023-07-07 17:05 shayloyuki 阅读(196) 评论(0) 编辑 收藏 举报