// 修改vue APP.vue文件 <template> <div id="app"> // 先将router-view 添加v-if或者v-show方法 通过控制显示和隐藏起到刷新页面的效果 <router-view v-if="isRouterAlive" /> </div> <template> <script> export default { provide() { return { // 调用下面reload 的方法 reload: this.reload }; }, data() { // 初始化isRouterAlive return { isRouterAlive: true }; } methods: { reload() { this.isRouterAlive = false; this.$nextTick(function() { this.isRouterAlive = true; }) } } } </script> // 上面是在app.vue文件里面修改的东西 下面教的是每个页面怎么使用这个方法 // 后缀名为.vue的文件内容 是由 <template> <script> <style> 三部分组成 我们只需要在script里面添加 { inject: ["reload"] } 然后在我写的代码倒数第8行添加的 { this.reload() }这个方法就可以起到刷新页面的效果了 <template> </template> <script> export default { inject: ["reload"], // 不要忘记写这个 data() { return {} }, methods: { // 比方说我这个是页面的编辑方法,编辑完之后,点击 这时我需要重新刷新一下页面 editDemo() { // 如果看不懂我这个方法 可以去看看我自己封装的axios 链接这里: https://www.cnblogs.com/blueswithchenxing/p/11119094.html var res = this.$http.request({ // 这是请求的路径(路径的两边我用的不是单引号 而是 键盘esc / 键盘tab 按钮 下面 / 上面 的那个点 ) url: `/hhgjdshfsdf`, data: { //写你向后台传的数据 } }) .then(function(res) { var data = res.data; if (data.status === 200) { //这里写你需要的根据后台返回的数据赋值等操作 写完之后加 this.reload() 这个方法就可以了 this.reload(); //重新刷新页面的方法 哪个方法需要哪里调用就可以了 } }) } } } </script> <style></style>
原文地址:https://www.cnblogs.com/blueswithchenxing/p/11153086.html
时间: 2024-10-04 17:30:10