vue实现路由不变的情况下，刷新页面操作示例

更新时间：2020年02月02日 08:45:12 作者：不想写代码的码农

这篇文章主要介绍了vue实现路由不变的情况下，刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下

本文实例讲述了vue实现路由不变的情况下，刷新页面操作。分享给大家供大家参考，具体如下：

背景1：在vue写的后台管理项目中，经常会有增、删、改、查的操作，这些操作只是跟用接口跟后台交互下

既然用接口交互，那肯定就是axios的异步请求，那么就是说后台数据发生了改变，但是前台的数据并没有实时的更新（每次操作完后台把列表数据重新返给你例外，但是这样的话每次交互的数据量就偏大了）

背景2：在使用动态路由配置 /detail/:id 这样的情况下，由于 router-view 是复用的，单纯的改变 id 的值并不会刷新 router-view

所以就要想一个办法，让后台执行完操作后，给前台返一个操作结果，然后前台手动刷新页面

一开始我想到的是用 window.location.reload() 或者 this.$router.go(0) 这两个方法，但是后来发现这两个方法会有短暂的白屏时间，用户体验并不太好，所以就放弃了，看了下别人的做法，整理下面两种方法：

一、用中转站的方式

这种方式意思就是让每次操作完成以后，都让路由跳转到这个中转站页面，然后这个页面获取到进来路由的路径再返回去就可以了，这种方式可以作为解决方法之一，普遍用的还是第二种。

二、provide / inject 的方式

这种方式，就是让通过 provide 让 App.vue 为所有子孙页面注入一个 reload 的方法，然后在需要使用的页面，通过 inject 注入即可，代码如下：

App.vue

<template>
 <div id="app">
  <router-view v-if="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;
   });
  }
 }
};
</script>

子页面

export default {
  name: 'children',
  inject: ['reload'],
  data(){
    return {}
  }
  methods: {
    delData(){
      //在axios成功的回调里面
      this.reload();
    }
  }
}

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

Vue项目使用px2rem方法示例详解
这篇文章主要为大家介绍了Vue项目使用px2rem的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue与django集成打包的实现方法
这篇文章主要介绍了vue与django集成打包的实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
Vue自定义加水波纹效果指令实例代码
这篇文章主要给大家介绍了关于Vue自定义加水波纹效果指令的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-02-02
快速理解Vue路由导航守卫
这篇文章主要介绍了快速理解Vue路由导航守卫，“导航”表示路由正在发生变化，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的，下面来快速来接具体内容吧
2021-12-12
Vue 自定义ColorPicker及使用方法
这篇文章主要介绍了Vue 自定义ColorPicker及使用方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
基于vue-cli npm run build之后vendor.js文件过大的解决方法
今天小编就为大家分享一篇基于vue-cli npm run build之后vendor.js文件过大的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3如何在setup中获取元素引用(ref)
这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
基于vue通用表单解决方案的思考与分析
这篇文章主要给大家介绍了基于vue通用表单解决方案的思考与分析，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
vue如何清除浏览器历史栈
这篇文章主要介绍了vue如何清除浏览器历史栈，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue中keep-alive的两种应用方式
这篇文章主要介绍了Vue中keep-alive的两种应用方式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07