antd vue 重新整理保留當前頁面路由,保留選中選單,保留menu選中操作
阿新 • • 發佈:2020-08-06
廢話不說,上程式碼!
<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選中操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。