Vue.js项目刷新当前路由(页面)的方法与实践

前言

越来越多的前端项目使用MVVM框架Vue.js进行架构开发，充分利用了Vue.js的数据驱动、双向数据绑定、组件化开发以及其优秀的社区生态(官网+第三方扩展支持)等能力。Vue.js在提升性能方面着重的使用了组件复用能力，极大的优化了DOM更新的速度，提升了用户体验。

Vue-Router是Vue的黄金伴侣，用于设置路由，管理路由，优秀的钩子函数，简洁粗暴的配置，让它总是那么受人欢迎!

But,但是(人生总是需要些转折,有些惊喜不是....)

使用Vue-Router在进行路由配置时也会带来些问题：

1. 重新进入当前路由时，页面是不进行刷新的
2. 在进行列表类数据操作时：新增、删除、编辑时可能需要让当前页面刷新

下面就跟随胡哥的风骚走位，一起来探究刷新当前路由(页面)的方式

方法一：暴力解决-强制整个页面进行刷新

1. 使用this.$router.go(0)函数，可以强制刷新当前页面
2. 使用window.location.href或者window.location.reload()，强制刷新当前页面

问题： 此两种处理都会是当前页面进行刷新，浏览器进行重新加载，出现页面闪烁和空白，极大的降低了用户体验。

方法二：完美优雅-借助vue的选项/组合 provide/inject

这对选项要组合一起使用，以允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里生效 -- 引自Vue.js官网描述

// App.vue组件
<template>
  <router-view v-if="isShow" />
</template>
<sciprt>
 export default () {
    name: 'App',
    data () {
      return {
        // 控制router-view的隐藏与展示
        isShow: true
      }
    },
    
    // 提供可注入子组件属性
    provide () {
      return {
        reload: this.reload
      }
    },

    // 定义reload方法
    methods: {
      reload () {
        // 先隐藏
        this.isShow = false
        
        // $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
        this.$nextTick(() => {
          this.isShow = true
        })
      }
    }
  }
</script> 

// NavBar.vue 导航组件
<template>
  <div class="nav-bar">
    // 一定要添加.native修饰符，默认router-link阻止了a链接的默认事件
    <router-link :to="{name: 'Index'}" @click.native="showRouter">首页</router-link>
    <router-link :to="{name: 'Index'}" @click.native="showRouter">首页</router-link>
  </div>
</template>
<script>
export default {
  name: 'NavBar',
  // 接收注入的数据
  inject: [
    'reload'
  ],
  methods: {
    showRouter () {
      // 调用reload方法，刷新整个页面
      this.reload()
    }
  }
}
</script>

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击在看呦，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！

胡哥有话说