vue:退回,标签页和显示位置默认选中之前

最新推荐文章于 2025-05-30 17:46:23 发布

小小怪_下士

最新推荐文章于 2025-05-30 17:46:23 发布

阅读量606

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45061461/article/details/131659185

版权

1.项目bug,由于之前nav导航栏,tab标签页和其他组件都有关联,点击菜单栏,其他组件要更改或者添加对应的数据

图中,点击标签页要添加一个,并且选中跳转页面,还有顶上显示的模块位置也要改变.

今天发现一个bug就是如果点击角色管理,上一个页面是用户管理页,如果我在角色管理中点击回退.

就导航栏组件默认选中了,回退后的用户管理.其他两个组件都没有任何改变

caidanxinxi:后端返回的路由信息

tab:标签页显示的点击菜单信息 ->防止刷新数据丢失所以就存起来了

breadcrumb-list:下拉菜单信息 ->防止刷新数据丢失所以就存起来了

这个我本地数据的结构,保存有整个后端返回的菜单数据信息

还有当前选中的下拉菜单数据信息

还有选中的点击菜单数据信息,

由于是需要在回退的时候更改以上几个组件的数据默认选择或者修改数据,

我就想着在路由前置守卫中做一些处理,毕竟可以获取到跳转前页面和跳转的页面信息

1.先定义一个方法来处理前置路由守卫获取到的路由名称



//tab显示问题 点击切换tab再点击返回按钮,tab没改变 因为本地中的 tab数据没变 所以tab获取不到最新的内容 
/**
 * 1.获取到前端路由守卫中点击的路径 或者 name 在本地中的caidanxinxi中查找出对应的菜单,然后把值替换本地中的tab
 */
// const _this = Vue

function  replacetab (that,path){
  // path = '/runningwater'
//1.获取本地中的 caidnaxinxi 对象 然后根据 path 找到对应的数据
let list = JSON.parse(sessionStorage.getItem('caidanxinxi')) 
  //2.循环遍历对象中的点击菜单
  for(let i in list){
    //循环菜单信息
    for(let k in list[i].children){
      if(list[i].children[k].path === path){

        //把this.list保存到 session中 避免刷新是 内容消失
        sessionStorage.setItem('breadcrumb-list',JSON.stringify(list[i]))
         //获取到改name值 去数组中找出该对象 保存 对象的name值 和 url地址
        sessionStorage.setItem('tab',JSON.stringify(list[i].children[k]))
        


        //显示哪个点击菜单
        that.bus.$emit('title',list[i])
        //显示哪个下拉菜单
        that.bus.$emit('tabname',list[i].children[k].name)

        //把退回的菜单信息提交给tab组件的  editableTabsValue tab组件
        that.bus.$emit('editableTabsValue',list[i].children[k])
        
      }
    }
  }
}

//抛出 定义的方法
export default {
  replacetab,
}

router.js 路由文件


/**6.26 前置路由守卫 
 * to:将要进入哪个页面
 * from:从哪个页面进入
 * next:是否可以进入
 */
router.beforeEach((to, from, next) => {
    // console.log('去哪个页面', to);
    // console.log('在哪个页面进去', from);

        //解决点击tab 之后切换页面,但是在点击返回按钮,tab没切换到对应的tab显示的页面问题
        let that =  Vue.prototype
          //传递将要去哪个页面的路由地址
        common.replacetab(that,to.path)
  
})

breadcrumb组件更改上面显示的模块菜单信息和点击的菜单信息

 <el-breadcrumb separator="/" class="breadcrumb">
  
    <div class="breadcrumb-box" >
       
        <el-breadcrumb-item >{{list.title}}</el-breadcrumb-item>
        <el-breadcrumb-item v-if="lists.title">{{lists.title}}</el-breadcrumb-item>
        
    </div>
    <div class="user"><my-user></my-user></div>
</el-breadcrumb>



/**
         * 
         * 接收标签页传过来的数据
         */
        //接收tab点击菜单传过来的List 还有包括该菜单的 id
        this.bus.$on('title',val=>{
            console.log('valllllllllllllllllllllllllllllllllll',val);
            this.list = val
            //把this.list保存到 session中 避免刷新是 内容小时
           sessionStorage.setItem('breadcrumb-list',JSON.stringify(this.list))
        })
        //接收 nav组件传过来的 tabname 菜单的唯一标识
         this.bus.$on('tabname',val=>{
            console.log('tabnametabnametabnametabnamev',val);

          let childs = this.list.children
          //判断点击的这个菜单中 对比 点击的菜单id 找出对应的 菜单  val点击菜单的唯一标识  childs 菜单的唯一标识
           //判断是否 包含child 属性, 因为 只要是包含child的是一级下拉菜单,如果不包含child 就是一级点击菜单  不然 页面会报错 
          if(this.list.children!== undefined){
            for(let i = 0; i< childs.length ; i++){
                if(val === childs[i].name){
                    this.lists = childs[i]
                }
            } 
          }
        })

tab标签组件

<el-tabs   class="tab-list" @tab-click="tabClick" v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
  <el-tab-pane
    v-for="(item, index) in editableTabs"
    :key="item.path"
    :label="item.title"
    :name="item.name"
  >
  </el-tab-pane>
</el-tabs>

js:editableTabsValue 默认选中的tab标签页

   
//判断是否是点击菜单,标签页中存在
    this.bus.$on('editableTabsValue',val=>{
      this.editableTabsValue = ''+ val.name
})

完成效果,这个点击返回的效果