vue页面重置和刷新（vue数据重置）

怼烎@ 2023-10-02 23:22 40阅读 0赞

一、this.reload()方法（体验度好，无空白页面，相当于页面数据重置）

1、在app.vue文件中配置：

  1. <template>
  2.   <!-- 给全局挂载 适配元素 app -->
  3.   <div id="app">
  4.         <router-view v-if="isRouterAlive" />//判断
  5.   </div>
  6. </template>
  7. import _ from 'lodash'//引入
  8.  //自定义
  9.   provide() {
  10.     return {
  11.       reload: this.reload
  12.     }
  13.   },
  14.   data() {
  15.     return {
  16.   //定义状态
  17.       isRouterAlive: true,
  18.     }
  19.   },
  20.   methods: {
  21.     //重置方法
  22.     reload() {
  23.       this.isRouterAlive = false
  24.       this.$nextTick(() => {
  25.         this.isRouterAlive = true
  26.       })
  27.     }
  28.   }

2、在需要使用的页面中引入参数使用：

  1. //需要使用的页面引入
  2. export default {
  3. inject: ['reload'], 
  4. methods: {
  5.     //事件方法
  6.     getReload() {
  7.       this.reload() //重置刷新
  8.     },
  9.   }
  10. }

二、利用vue中的路由方法（偏向于刷新页面）

  1. this.$router.go(0)

三、利用window的reload方法（强制刷新）

  1. window.location.reload()

发表评论

表情：
评论列表 （有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读