vue3使用antdv 组件处理左边菜单栏,刷新菜单栏保持选中状态

//方法1 

  <a-menu
      v-model:selectedKeys="selectedKeys"
      theme="dark"
      mode="inline"
      @click="activeMenu = selectedKeys"
    >



const selectedKeys = ref([sessionStorage.getItem("activeMenu") || "/home"]);
const activeMenu = ref(sessionStorage.getItem("activeMenu") || "/home");
// console.log('1',activeMenu.value);
watch(selectedKeys, (newValue) => {
  // console.log(newValue);
  sessionStorage.setItem("activeMenu", newValue);
});
onMounted(() => {
  activeMenu.value = sessionStorage.getItem("activeMenu") || "/home";
});


//方法2  直接加一个属性

  <a-menu
      :selectedKeys="[$route.path]"
      theme="dark"
      mode="inline"
      
    >

思路:

        1.给菜单加一个点击事件赋值给双向绑定选中的key

        2.使用watch监听选中的key 发生变化,将新值赋值给绑定的点击事件并存于本地

        3. 在生命周期挂载后,取出本地存储的点击事件值,展现在页面上

       

相关推荐

  1. vue3学习——封装菜单

    2024-06-06 03:28:02       43 阅读
  2. vue2使用过滤器实现菜单文字动态显示

    2024-06-06 03:28:02       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-06 03:28:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-06 03:28:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-06 03:28:02       82 阅读
  4. Python语言-面向对象

    2024-06-06 03:28:02       91 阅读

热门阅读

  1. 利用多线程打印出1 2 3

    2024-06-06 03:28:02       25 阅读
  2. 力扣2653.滑动子数组的美丽值

    2024-06-06 03:28:02       30 阅读
  3. LabVIEW编程语言:深度解析与实践应用

    2024-06-06 03:28:02       36 阅读
  4. 好用软件推荐

    2024-06-06 03:28:02       23 阅读
  5. Sql入门教程

    2024-06-06 03:28:02       27 阅读
  6. Android基础-消息分发机制

    2024-06-06 03:28:02       27 阅读
  7. 获取字典树形结构框架树代码

    2024-06-06 03:28:02       29 阅读
  8. 常见攻击类型整理

    2024-06-06 03:28:02       25 阅读
  9. 大文件分片【笔记】

    2024-06-06 03:28:02       30 阅读
  10. PyTorch 的 torch.nn 模块学习

    2024-06-06 03:28:02       31 阅读
  11. 海豚调度器调用api接口启动工作流(亲试可用)

    2024-06-06 03:28:02       31 阅读
  12. hadoop基础之MapReduce的学习

    2024-06-06 03:28:02       28 阅读
  13. Linux创建用户与yum安装软件

    2024-06-06 03:28:02       24 阅读
  14. Go 语言基础

    2024-06-06 03:28:02       27 阅读
  15. mysql锁

    2024-06-06 03:28:02       29 阅读