Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.1k views
in Technique[技术] by (71.8m points)

ant-design的menu,用this.$router.push到别的页面时,菜单栏没有更新这个路由地址。

点击跳转到别的页面图
image.png
页面跳转了,但是menu并没有变化,只有再刷新才会重新获取地址再展开,这个如何解决呢?
image.png

changeView(name) {
      switch (name) {
        case "遥测":
          this.$router.replace({ path: "/stationRealTime" });
          break;
        case "母线":
          this.$router.replace({ path: "/busRealTime" });
          break;
        case "线路":
          this.$router.replace({ path: "/lineRealTime" });
          break;
        case "变压器":
          this.$router.push({ path: "/transRealTime" });
          break;
        case "发电机":
          this.$router.push({ path: "/PSrealTime" });
          break;
        case "无功补偿装置":
          this.$router.push({ path: "/statcomRealTime" });
          break;
        default:
          console.log("数据不存在");
      }
    },

html

<!-- ant的menu -->
<a-menu
            theme="dark"
            :openKeys="openKeys"
            @openChange="onOpenChange"
            mode="inline"
            :defaultSelectedKeys="defaultSelectedKeys"
          >
            <template v-for="item in menuList">
              <a-menu-item v-if="item.children === false" :key="item.router">
                <icon-font :class="item.class" :type="item.icon" />
                <router-link class="home-page" :to="item.router" >{{item.name}}</router-link>
              </a-menu-item>

              <a-sub-menu v-else :key="item.router">
                <span slot="title">
                  <icon-font :class="item.class" :type="item.icon" />
                  <span>{{item.name}}</span>
                </span>
                <a-menu-item v-for="menuChildren in item.children" :key="menuChildren.router">
                  <router-link style="display:block" :to="menuChildren.router">{{menuChildren.name}}</router-link>
                </a-menu-item>
              </a-sub-menu>
            </template>
          </a-menu>
          
          <!-- 显示子路由的router-view -->
          <a-layout-content>
          <router-view
            class="home-con"
            :default-active="$route.path"
          ></router-view>
        </a-layout-content>
        

js:

export default {
  name: "Home",
  data() {
    return {
      defaultSelectedKeys: [this.$route.path],
      openKeys: this.$store.state.openKeys,
      menuList,
    };
  },
  components: {
    "header-side": headerSide,
    IconFont,
  },
  created() {
    const result =  this.menuList;
    this.menuList = result; 
    this.showMenu(result);
  },
  mounted() {
    // 监听页面刷新事件
    window.addEventListener("unload", this.saveStatus);
   
  },
  computed: {
    collapsed: {
      get: function() {
        return this.$store.state.status.collapsed;
      },
      set: function(newData) {
        return newData;
      },
      activePath() {
        return this.$route.path;
      },
    },
  },
  methods: {
  // 保存侧边栏展开,关闭标识
    saveStatus() {
      sessionStorage.setItem(
        "changeStatus",
        JSON.stringify(this.$store.state.status.collapsed)
      );
    },
    
    // menu事件
    showMenu(result) {
      // console.log(this.$store.state.openKeys)
      for (let i = 0; i < this.menuList.length; i++) { 
        if (result[i].children !== false) {  
          for (let y = 0; y < result[i].children.length; y++) {  
            if (result[i].children[y].router === this.$route.path) { 
              this.openKeys = [result[i].router]
            }
          }
        }
      }
    },
    onOpenChange(openKeys) {
      console.log(this.$store.state.openKeys)
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]];
      } else {
        this.openKeys = [""];
      }
    },
    clickItem(obj) {
      this.$router.push(obj.key);
    },
  },
};

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

antd的menu无法更新选中和展开

  1. home.vue

    <a-menu
        theme="dark"
        :openKeys="openKeys"
        @openChange="onOpenChange"
        @select="select"
        mode="inline"
        :defaultSelectedKeys="defaultSelectedKeys" // 这个是初始选中的菜单项 key 数组,改它是没用的
        :selectedKeys="selectedKeys" // 当前选中的菜单项 key 数组,要改变它
    ></a-menu>
    
    export default {
    data() {
        return {
          defaultSelectedKeys: [this.$route.path],
          menuList,
        };
    },
    computed: {
        selectedKeys() { // 当前选中
          return this.$store.state.selectedKeys;
        },
        openKeys: { // 当前展开
          get: function() {
            return this.$store.state.openKeys;
          },
          set: function(newData) {
            return this.$store.state.openKeys = newData;
          },
        },
      },  
     mounted() {
        // 监听页面刷新事件
        // 存在storage中的数据,刷新获取,以免vuex丢失数据
        window.addEventListener("unload", this.saveOpenKeys); 
        window.addEventListener("unload", this.saveSelectedKeys);
      },
     methods: {
        saveOpenKeys (){ // 存在storage中的 当前展开
          sessionStorage.setItem(
            "changeOpenKeys",
            JSON.stringify(this.$store.state.openKeys)
          );
        },
        saveSelectedKeys (){ // 存在storage中的 当前展选中
          sessionStorage.setItem(
            "changeSelectedKeys",
            JSON.stringify(this.$store.state.selectedKeys)
          );
        },
        
        showMenu(result) { // 获取菜单
          for (let i = 0; i < this.menuList.length; i++) { 
            if (result[i].children !== false) {  
              for (let y = 0; y < result[i].children.length; y++) {  
                if (result[i].children[y].router === this.$route.path) { 
                  this.openKeys = [result[i].router]
                }
              }
            }
          }
        },
        select(item){ // 当前点击选中事件
          // console.log(item)
          this.$store.state.selectedKeys = item.keyPath
          sessionStorage.setItem(
            "changeSelectedKeys",
            JSON.stringify(item.keyPath)
          );
        },
        onOpenChange(openKeys) { // 当前展开事件
          // console.log(openKeys)
          // // console.log()
          sessionStorage.setItem(
            "changeOpenKeys",
            JSON.stringify(openKeys)
          );
          this.$store.commit("onOpenChange", openKeys);
        },
      },
    }
  2. state.js

    export default {
      openKeys: JSON.parse(sessionStorage.getItem("changeOpenKeys")) || ['/'], // 当前展开
      selectedKeys: JSON.parse(sessionStorage.getItem("changeSelectedKeys")) || ['/'],  // 当前选中
    };
  3. mutations.js

    export const onOpenChange = (state, option) => { // 更新当前展开
      if (option.length !== 0) {
        state.openKeys = [option[1]];
      } else {
        state.openKeys = [""];
      }
    };
    export const changeSelectedKeys = (state, option) => { // 更新当前选中
      state.selectedKeys = option;
    };
15.1. 使用
  1. 当前页跳到不同的页面,在即将进入的页面 commit 这两个 mutaion

    created() {    
        this.$store.commit("onOpenChange", ['/zoneDataOV',this.$route.path]);
        this.$store.commit("changeSelectedKeys", [this.$route.path]);
    }
  2. 一个展开项里面把数据传到当前展开项的其他页面

    created() { // 只要更新选中就可以了
        this.$store.commit("changeSelectedKeys", [this.$route.path]);
    }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...