前言
越来越多的前端项目使用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>
