实现原理:
1、移除目标页面(当前页面)
2、重新渲染目标页面
代码实现:
在vue2中,我们需要用到provide和inject这对方法(它们总是成对出现的),这对方法可以让我们跨多层级进行通信。也可查看vue2跨组件通信。
App.vue
<template><div id="app"><router-view v-if="showRouterView"/></div></template><script>export default {name: 'App',provide(){return{reload:this.reload}},data(){return{showRouterView:true}},methods: {reload (){// 改变this.showRouterView的状态,控制路由出口的显示隐藏this.showRouterView = falsethis.$nextTick(()=>{ // 必须使用nextTick,否则最新dom可能未更新,导致刷新失败this.showRouterView = true})}}}</script>
使用provide提供的方法或属性,可以在任意子孙级组件中通过inject获取。
某子孙组件
export default {inject:['reload'],data(){return {}},methods:{change(){// 页面逻辑执行完毕后调用reload方法this.reload();}}}
使用inject注入的方法,相当于methods中的方法,可以直接使用。