我一直采取的方式
比如我一开始有列表数据,我要删除某一数据,之后删除接口请求成功之后,最后重新请求列表数据接口。
是不是你跟我一样,
今天看见一篇文章 利用 provide和inject 处理 刷新页面问题
provide / inject
官网文档链接
PS:provide
和 inject
绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
本文以真实接口调试,童叟无欺。
App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isRouterAlive: true,
};
},
// 父组件中返回要传给下级的数据
provide() {
return {
reload: this.reload,
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(() => {
this.isRouterAlive = true;
});
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
About.vue
<!-- about -->
<template>
<div :style="{ scrollTop:num}">
<div style="height:1000px"></div> // 测试位置的,让页面一定高度
<div>测试</div>
<ul>
<li
v-for="(item, index) in aboutList"
:key="index"
>
{{ item.title }}
<button @click="deleteItem(item._id)">删除</button>
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
inject: ["reload"],
data() {
return {
aboutList: [],
page: 1,
num: 0
};
},
created() {
this.getDate();
},
methods: {
getDate() {
axios({
url: "https://xxxxxxx/api/book/bookCategory/cateList",
params: {
parentId: "5d773a3db25278222ee1721a"
}
}).then(res => {
this.aboutList = res.data.data;
});
},
deleteItem(bookCate_id) {
axios({
url: "https://xxxxx/api/book/bookCategory/deleteBookCate",
method: "POST",
data: {
bookCate_id
}
}).then(res => {
if (res.data.status == 0) {
this.reload();
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
this.num = scrollTop // 删除当前元素,保留当前位置
}
});
}
}
};
</script>
<style lang="css">
li {
height: 100px;
}
</style>