展开
拓展 关闭
订阅号推广码
GitHub
视频
公告栏 关闭

vite2 + vue3实现curd(二):侧边栏优化

  • 进入控制台页面后,因为侧边栏的default-active属性,每次刷新都会显示hello页面

  • 我们希望选中一个页面后,刷新时依然显示该页面

  • 首先default-active指定一个路径

<template>
  <el-menu
      class="el-menu-vertical-demo"
      :default-openeds="['1']"
      :default-active="activePath"
      active-text-color="#409EFF"
  >
</template>

<script lang="ts">
export default {
  data () {
    return {
      activePath: ''
    }
  },
}
</script>
  • 当我们点击子节点时,将该节点的index保存到sessionStorage,之后每次刷新时就从sessionStorage中取出来赋值给default-active
<el-menu-item index="1-1" @click="show(1, '1-1')" :class="index===1? 'active':''">hello!</el-menu-item>

methods: {
    show (value:number, v2:String) {
      window.sessionStorage.setItem('activePath', v2);
    }
},
created(){
    this.activePath =  window.sessionStorage.getItem('activePath')
}
posted @ 2021-12-29 15:03  DogLeftover  阅读(50)  评论(0编辑  收藏  举报