provide / inject 组合:
App.vue文件
声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
<template> <div id="app"> <router-view v-if="isRouterAlive"/> </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; }); } }, } </script>
tableList.vue 文件(需要刷新的页面)
在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。
inject: ["reload"]
//刷新列表页面
this.reload();