项目中使用的是element ui,点击菜单栏时,使用编程式导航this.$router.push({name: key}),发现同样的一个路由,多次push时,页面不会再次刷新和发送请求。
在父组件中使用provide抛出:
<template>
<div id="app">
<router-view v-if="!$route.meta.isKeepAlive && isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide (){
return {
reload:this.reload
}
},
data(){
return {
isRouterAlive:true
}
},
methods:{
reload (){
this.isRouterAlive = false
this.$nextTick(function(){
this.isRouterAlive = true
})
}
},
components:{
}
}
在子组件中使用inject引入和调用:
export default {
name: "abc",
inject:['reload'],
data() {
return {
}
},
methods:{
aaa(){
this.reload();
}
}
}
原理:利用v-if控制router-view