廢話不說，上代碼！

nav 1

nav 2

nav 3

重點：

1，selectedkeys要設置成$route.path地址

2，a-menu-item 的key設置成要去的地址

刷新頁面，成功！

補充知識：vue根據路由刷新頁面(切換菜單刷新頁面)

刷新頁面有兩種方法：

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

一種是用provide+inject，

provider/inject：簡單的來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。

需要注意的是這里不論子組件有多深，只要調用了inject那么就可以注入provider中的數據。而不是局限于只能從當前父組件的prop屬性來獲取數據。

1.在app.vue頁面中加入

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方法，里面就是調用重新加載的方法

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue切换菜单时不需要页面刷新_antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。