1. 程式人生 > 程式設計 >antd vue 重新整理保留當前頁面路由,保留選中選單,保留menu選中操作

antd vue 重新整理保留當前頁面路由,保留選中選單,保留menu選中操作

廢話不說,上程式碼!

<a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]">
     <a-menu-item :key="'/home'">
      <router-link to="home">
       <a-icon type="user" />
       <span>nav 1</span>
      </router-link>
     </a-menu-item>
     <a-menu-item :key="'/about'">
      <router-link to="about">
       <a-icon type="video-camera" />
       <span>nav 2</span>
      </router-link>
     </a-menu-item>
     <a-menu-item :key="'/123123'">
      <router-link to="123123">
       <a-icon type="upload" />
       <span>nav 3</span>
      </router-link>
     </a-menu-item>
    </a-menu>

重點:

1,selectedkeys要設定成$route.path地址

2,a-menu-item 的key設定成要去的地址

重新整理頁面,成功!

補充知識:vue根據路由重新整理頁面(切換選單重新整理頁面)

重新整理頁面有兩種方法:

一種是用:localtion.reload();但是這種是重新載入頁面,造成一閃一閃的效果。

一種是用provide+inject,

provider/inject:簡單的來說就是在父元件中通過provider來提供變數,然後在子元件中通過inject來注入變數。

需要注意的是這裡不論子元件有多深,只要呼叫了inject那麼就可以注入provider中的資料。而不是侷限於只能從當前父元件的prop屬性來獲取資料。

1.在app.vue頁面中加入

 <div id="app">
   <router-view v-if="isRouterAlive"></router-view>
 </div>
 provide() {
   return{
    reload: this.reload
   }
  },data() {
   return {
    isRouterAlive: true
   }
  },methods: {
   reload () {
    this.isRouterAlive = false;
    this.$nextTick(function () {
     this.isRouterAlive = true
    })
   }
  },

2.在選單頁面加入

inject: ['reload'],// 注入過載的功能(注入依賴)
watch: {
  //檢測路由引數發生改變時,重新整理當前頁面 呼叫
  '$route': function(){
   // this.reload();
  }
 },

3.注意這個@click方法,裡面就是呼叫重新載入的方法

 <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
          :index="item[pathKey]"
          @click="open(item)"
          :key="item[labelKey]"
          :class="{'is-active':vaildAvtive(item)}"
          >

呼叫this.reload()方法,即可重新載入路由重新整理頁面。

open(item) {
   if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
   this.$router.$avueRouter.group = item.group;
   this.$router.push({
    path: this.$router.$avueRouter.getPath({
     name: item[this.labelKey],src: item[this.pathKey]
    }),query: item.query,});
   this.reload();
  },

以上這篇antd vue 重新整理保留當前頁面路由,保留選中選單,保留menu選中操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。