每天一个开发小技巧☞☞☞Vue页面刷新

前序：

最近些日子项目中碰到了一个有意思的需求，在完成编辑操作之后需要进行页面刷新，想到页面刷新，相信大部分童鞋第一时间想到的就是location.reload()，history.go(0) 等方法,诚然这些方法的调用简单粗暴，但是这对vue项目很不友好，会使页面重新加载出现暂时性的空白，而且耗费性能。作为一个有点对性能追求的前端攻城狮，高低怎么也要hack几个新的姿势哈哈哈！！！

姿势一：通过 provide 和 inject 结合 v-if 的功能触发页面刷新

核心原理就是通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果，show -> false -> show

1、修改app.vue，利用 v-if 可以刷新页面的属性，同时使用 provide 和 inject 将祖先节点的数据传递给子代节点

<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>

2、在要刷新的子路由页面引入inject,然后执行reload事件即可刷新页面

export default {
      name: "ReloadView",
      inject:['reload'],
      methods: {
        reflesh(){
          this.reload()
        },
      }
    }

姿势二：通过 provide 和 inject 结合 key-change 的功能触发页面刷新

核心原理就是通过改变router-view 的key值，来重渲染路由区域，重而达到页面刷新的效果，show -> false -> show

1、修改app.vue，利用 key变更可以触发Vue的渲染更新，实现刷新页面的功能，同时使用 provide 和 inject 将祖先节点的数据传递给子代节点

<template>
  <div id="app">
        <router-view :key="time"></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide (){
     return {
       reload:this.reload
     }
  },
  data(){
    return {
       time:''
    }
  },
  methods:{
     reload (){ 
        this.date = new Date().getTime()
    } 
  }
}
</script>

2、在要刷新的子路由页面引入inject,然后执行reload事件即可刷新页面

export default {
      name: "ReloadView",
      inject:['reload'],
      methods: {
        reflesh(){
          this.reload()
        },
      }
    }

姿势三：带上当前页面路由跳转到一个重定向的页面，重定向页面再跳转回来

核心：利用一个空的路由进行中转达到页面刷新效果

// 1、新建redirect.vue
<script>
export default {
  name: "redirect",
  beforeCreate() { 
   const { params, query } = this.$route 
   const { path } = params 
   this.$router.replace({ path: '/' + path, query }) 
   },
</script>

// 2、router.js配置一个refresh路由
{
    path: '/redirect',
    name: 'redirect',
    component: ()=>import("@/components/Redirect")
},

// 3、在要刷新的地方跳转传参即可
reflesh(){
    const { fullPath } = this.$route 
    this.$router.replace({ path: '/redirect' + fullPath })
},

结语

会不定期更新一些前端有趣的知识，喜欢的可以点点发财小手关注，点赞走一波哈