vue 页面刷新

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>

需要刷新的页面(lscz.vue)中注册 reload ,调用reload() 方法,

export default {
  components: {
    "v-lsczLeft": lsczLeft
  },
  inject: [‘reload‘],  //注入reload方法
  data() {
    return {
    };
  },
  methods: {
    gdSubmit() {
       this.teload();  //刷新
    }
  }
}

原文地址:https://www.cnblogs.com/miny-simp/p/9962071.html

时间: 2024-11-04 03:40:26

vue 页面刷新的相关文章

URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/article/details/89022149   由于 router-view 是复用的,单纯的改变 id 的值并不会刷新 router-view 这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / in

VUE页面刷新404

1.配置nginx(nginx和项目要在一台机器上) 当访问vue页面时,直接访问url会被http server直接解析到该文件路径,但是spa的路由是虚拟的,并不能直接找到这个file,所以会404: 需要把所有的请求全部指向(不知道这么说是不是准确)index,然后让js的router解析url, nginx 需要配置 try_files $url /index.html (出现该问题的原因,可查看HTML5 History 模式:https://router.vuejs.org/zh/g

vue:vue页面刷新vuex数据消失问题

vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数里请求,b页面用的数据b页面的生命周期函数里请求 你需要知道JavaScript代码是运行在内存中的,代码运行时的所有变量,函数,也都是保存在内存中的.刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想储存就必须储存在外部,例如:Local Storage, Sessi

vue el-form鼠标事件导致页面刷新解决方案;vue 阻止多次点击提交数据通用方法

一.阻止表单自动提交刷新页面:<el-form> <el-form-item :inline="true" @submit.native.prevent> <el-input @keyup.enter.native='submit'></el-input> </el-form-item> </el-form> 注意: 鼠标事件导致页面刷新问题,在el-form上增加 @submit.native.prevent 可

vue项目刷新当前页面

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

Vue. 之 刷新当前页面,重载页面数据

Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 script代码块添加:watch模块,如下代码: ... ... mounted : function() { this.loadData(); }, watch: { //监听相同路由下参数变化的时候,从而实现异步刷新 '$route'(to,from) { this.loadData(); }, },

vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

Vue - 监听页面刷新和关闭

一,在 created中 注册 页面刷新和关闭事件 created() {  window.addEventListener('beforeunload', e => this.test(e)) } 二,事件,将你的逻辑方法加进去 methods: {  test(e) {   console.log('刷新或关闭')   // ...  } } 三,卸载注册的事件 destroyed() {  window.removeEventListener('beforeunload', e => t