Vue-element-admin: tagsViews 二级菜单切换到三级菜单， 三级菜单状态没保存

[MonsterQueLLa]

设置noCache:false 同级菜单间切换时 页面状态都能保存 没问题；但二级菜单切到三级菜单时，三级菜单状态没保存，页面组件会重新刷新；研究了代码还是未能解决，望楼主赐教；

[PanJiaChen]

已知问题
Duplicate of #406
最近有点忙，我抽空搞一下吧。

[zhanganyi]

@PanJiaChen tagsViews 二级菜单切换到三级菜单， 三级菜单状态没保存，这个问题后面解决了吗？谢谢，谢谢！

[YuanQGit]

哇塞，我也遇到了！找办法中。。。。

[YuanQGit]

@zhanganyi 我这边有个办法，把所有三级页面的父路由 全都设置成一个 compnent. 这样所有三级页面之间切换可以保存状态。二级菜单页面也可以强行加一个同样的父路由。因为下面只有一个子路由，所以表现出来的就是 二级路由。

[zhanganyi]

@YuanQGit 您好，不是太明白您的做法？谢谢！

[YuanQGit]

@zhanganyi 你的三级页面不是应该有个父路由吗？ 父路由的component 全都设置成同一个 组件就行了

[zhanganyi]

@YuanQGit 嗯 好的，我试试，谢谢您！

[MonsterQueLLa]

@YuanQGit 三级菜单都公用一个父组件确认可以实现三级菜单间的状态保存，但是二级和三级间切换还是有问题，您说的给二级菜单强行加一个同样的父路由感觉不行啊，因为二级菜单已经有了父路由Layout，没法添加呀

[YuanQGit]

@MonsterQueLLa 我的意思是在 layout 与二级菜单之间 再加一个 菜单 ——就是公用的那个父组件。
由于 这个项目做了特殊设置 二级菜单下面只有一个 子菜单的话，就把子菜单当二级菜单显示，这样实际是三级菜单，但是看起来像二级菜单了。

https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/router-and-nav)
document里面有这样一句话，可以详细看看
在 Sidebar 中已经做了判断，当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式。如果子路由正好等于一个就会默认将子路由作为根路由显示在侧边栏中，若不想这样，可以通过设置在根路由中设置alwaysShow: true来取消这一特性

[MonsterQueLLa]

@YuanQGit 嗯嗯 我尝试下 感谢哈

[yanka1]

@YuanQGit 我还是有些没明白你的意思，不知道是不是哪里除了问题，三级之间状态公用父组件，仍未达到保存状态的效果。

[YuanQGit]

你看看是不是其它的问题 ，比如 path，name的设置。我自己的demo 完全OK的
@yanka1

[yanka1]

@YuanQGit 嗯，参考了下 分支 d431de0 的做法，是我这里在 add_views时，写顺手了，将扩展运算符用Object.assign代替了，导致cached_views没有被观察到，谢谢。

[MonsterQueLLa]

@YuanQGit @yanka1 朋友们 我按照你们的思路 增加了公用的父组件pageBox给二级菜单，但是并没有达到三级菜单模拟二级菜单的效果，并没有到达 “子路由正好等于一个就会默认将子路由作为根路由显示在侧边栏中” 的效果，不知道是不是我的sidebarItem.vue文件的代码不对，能麻烦你们帮我看下吗

[YuanQGit]

@MonsterQueLLa
emmmm!
里面test目录下只有一个 children才能变成2级目录的，你有index1,index2当然不能啦。

[MonsterQueLLa]

@YuanQGit 那我想实现的是 index1和index2作为二级菜单，并且又能给他们套一个公共父组件，应该怎么办呢

[MonsterQueLLa]

@YuanQGit “在 layout 与二级菜单之间 再加一个 菜单 ——就是公用的那个父组件。
由于 这个项目做了特殊设置 二级菜单下面只有一个 子菜单的话，就把子菜单当二级菜单显示，这样实际是三级菜单，但是看起来像二级菜单了。” 你这段话的具体实现是什么呢？是不是我理解错了

[MonsterQueLLa]

@YuanQGit 不用回复了 朋友 我已经明白你的意思了

[gaibian]

@MonsterQueLLa 我的意思是在 layout 与二级菜单之间 再加一个 菜单 ——就是公用的那个父组件。
由于 这个项目做了特殊设置 二级菜单下面只有一个 子菜单的话，就把子菜单当二级菜单显示，这样实际是三级菜单，但是看起来像二级菜单了。

https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/router-and-nav)
document里面有这样一句话，可以详细看看
在 Sidebar 中已经做了判断，当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式。如果子路由正好等于一个就会默认将子路由作为根路由显示在侧边栏中，若不想这样，可以通过设置在根路由中设置alwaysShow: true来取消这一特性

我的路由表层级 跟权限的层级是对应的 二级菜单 你做成三级菜单 后端拿回来的数据还是二级菜单结构 不处理没法匹配过滤路由 还有出现4级菜单呢？ 那不是很傻吗

[rhoninzhang]

@PanJiaChen 请问下这个问题有修复吗？

[kankantian]

没有 嵌套路由的锅 只能自己摸索了

[guihuashitang]

三级菜单的问题可以了吗

[lmy1991]

很简单啊。自己写个路由过滤的方法。把中间没用的路由给过滤掉就好了。
有偿服务请联系（[email protected]）

[363054730]

各位大神，多层级路由，keep-alive 不起作用这个问题有解决办法吗？

[363054730]

@PanJiaChen tagsViews 二级菜单切换到三级菜单， 三级菜单状态没保存，这个问题后面解决了吗？谢谢，谢谢！

[wk1127]

弱弱的问一句, 这个问题有好的解决方法了没,

[shengxiaoliang]

弱弱的问一句, 这个问题有好的解决方法了没,

[icom2014]

框架里把路由和菜单用同一个数据模型，但我们确定好自己的需求是要多级菜单还是嵌套路由，这一点要想清楚，我自己的情况是 左侧菜单，中间区域多tab(tagview),以前的后台界面布局习惯。
需求：多级菜单显示，路由不嵌套。
处理办法：沿用框架里的路由数据结构，菜单可正确生成。修改router 的生成方式，对目前的route(多级）做如下处理：如果目前路由树的叶子节点（非根节点）都绑定到其根节点上，形成2层的结构。简单说就是把多级树变成2级树，中间的目录型的节点都不要了。
改动后的问题：面包屑的级别自然只有首页-一级-二级 ，中间的目录没了。其实要它也没啥用，给了链接链向哪里都是问题。
改的地方：src/permission.js
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

      // dynamically add accessible routes

router.addRoutes(convertR(accessRoutes))

export function convertR(arr){

const res = []
// 1 level
arr.forEach(route => {
const tmp = { ...route }
let result=[]
getAllLeaf(tmp.children,result)
tmp.children=result
res.push(tmp)
})

return res
}

function getAllLeaf(children,result){

if(children){
children.forEach(r=>{
if(r.children){
getAllLeaf(r.children,result)
}else{
result.push(r)
}

})

}
叶子节点的path 使用全路径/ 开头