前言
越来越多的前端项目使用MVVM框架Vue.js进行架构开发，充分利用了Vue.js的数据驱动、双向数据绑定、组件化开发以及其优秀的社区生态(官网 第三方扩展支持)等能力。Vue.js在提升性能方面着重的使用了组件复用能力，极大的优化了DOM更新的速度，提升了用户体验。
Vue-Router是Vue的黄金伴侣，用于设置路由，管理路由，优秀的钩子函数，简洁粗暴的配置，让它总是那么受人欢迎!
But,但是(人生总是需要些转折,有些惊喜不是….)
使用Vue-Router在进行路由配置时也会带来些问题：
重新进入当前路由时，页面是不进行刷新的
下面就跟随胡哥的风骚走位，一起来探究刷新当前路由(页面)的方式
方法一：暴力解决-强制整个页面进行刷新
使用this.$router.go(0)函数，可以强制刷新当前页面
使用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>后记
胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！
