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]' : >

調用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選中操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。