zoukankan      html  css  js  c++  java
  • 解决el-menu基于keep-alive路由跳转菜单初始化设置

    ###问题来源:
    vue项目页面设置了keep-alive缓存信息 来回切换路由组件时再次进入当前页面时初始化设置为“批量抓单”这个菜单栏
    在activated生命周期已做修改但是页面渲染还是基于上一次缓存信息渲染详见(bug图)
    ###bug图

    ###源代码
    ```
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    >
    <el-menu-item index="1">批量抓单</el-menu-item>
    <el-menu-item index="2">抓单记录</el-menu-item>
    </el-menu>
    ```
    ###解决方法:重新渲染
    ```
    <el-menu
    v-if="activeIndex" //使用v-if重新渲染
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    >
    <el-menu-item index="1">批量抓单</el-menu-item>
    <el-menu-item index="2">抓单记录</el-menu-item>
    </el-menu>

    // 进入当前界面时执行的生命周期
    activated() {
    this.activeIndex = '1' // 路由跳转设置初始值
    },
    // 离开当前界面时
    deactivated() {
    this.activeIndex = undefined // 设置为undefined重新渲染界面
    },
    ```

  • 相关阅读:
    RedHat的定制安装
    Linux系统概述
    嵌入式学习方法
    mysql联合查询
    mysql之count
    memcached安装
    css书写规则
    nginx的fastcgi_param参数详解
    array_2.array_rand
    array_1.array_map
  • 原文地址:https://www.cnblogs.com/zhonglinfeng666/p/13370775.html
Copyright © 2011-2022 走看看