廢話不說(shuō)，上代碼！

nav 1

nav 2

nav 3

重點(diǎn)：

1，selectedkeys要設(shè)置成$route.path地址

2，a-menu-item 的key設(shè)置成要去的地址

刷新頁(yè)面，成功！

補(bǔ)充知識(shí)：vue根據(jù)路由刷新頁(yè)面(切換菜單刷新頁(yè)面)

刷新頁(yè)面有兩種方法：

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

一種是用provide+inject，

provider/inject：簡(jiǎn)單的來(lái)說(shuō)就是在父組件中通過(guò)provider來(lái)提供變量，然后在子組件中通過(guò)inject來(lái)注入變量。

需要注意的是這里不論子組件有多深，只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)。而不是局限于只能從當(dāng)前父組件的prop屬性來(lái)獲取數(shù)據(jù)。

1.在app.vue頁(yè)面中加入

provide() {

return{

reload: this.reload

}

},

data() {

return {

isRouterAlive: true

}

},

methods: {

reload () {

this.isRouterAlive = false;

this.$nextTick(function () {

this.isRouterAlive = true

})

}

},

2.在菜單頁(yè)面加入

inject: ['reload'], // 注入重載的功能(注入依賴)

watch: {

//檢測(cè)路由參數(shù)發(fā)生改變時(shí)，刷新當(dāng)前頁(yè)面 調(diào)用

'$route': function(){

// this.reload();

}

},

3.注意這個(gè)@click方法，里面就是調(diào)用重新加載的方法

調(diào)用this.reload()方法，即可重新加載路由刷新頁(yè)面。

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 刷新保留當(dāng)前頁(yè)面路由,保留選中菜單,保留menu選中操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。