专栏首页胡哥有话说Vue.js项目刷新当前路由(页面)的方法与实践

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

前言

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

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

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>

后记

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

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

本文分享自微信公众号 - 胡哥有话说(hugeyouhuashuo)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mpvue搭建小程序框架

    由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler) 运行时框架 runtime 和代码编译器 compiler 实现

    达达前端
  • 浅入深出Vue:数据渲染

    今天来正式开始 vue的学习,首当其冲的当然是数据的渲染。毕竟数据就是拿来看的,看看如果使用 vue来展示数据。

    若羽
  • 浅入深出Vue:组件

    这三部分会在接下来的章节中一一实践,在本篇中并不会给出具体的实例代码。 本篇更侧重于讲清楚在写组件之前应该要注意的地方。

    若羽
  • 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    由于家中有事,文章没顾得上。在此说声抱歉,这是工具准备的最后一章。 接下来就是开始环境搭建了~尽情期待

    若羽
  • 浅入深出Vue:事件处理

    在前端开发中,经常要面对各种表单、按钮。而这里面就住着一个事件:点击 (click)。

    若羽
  • 浅入深出Vue:环境搭建

    这里同样的,有固态硬盘的童鞋可以安装到固态硬盘,不过这里有个小问题就是 在选择目录的时候会卡死一小会儿。可能是若羽的机器性能不太好。

    若羽
  • 浅入深出Vue:数据绑定

    上一篇我们使用了简单的数据渲染,那么如果说我们想要动态渲染标签的 class 可以这么操作么?

    若羽
  • Vue简介

    vue.js 中 data, prop, computed, method,watch 介绍

    达达前端
  • 浅入深出Vue:前言

    之前大部分是在做后端,后来出于某些原因开始接触Vue。深感前端变化之大,各种工具、框架令人眼花缭乱。不过正是这些变化,让前端开发更灵活。

    若羽
  • 浅入深出Vue:路由

    路由的概念在计算机界中的历史大概可以追溯到OSI模型中的数据链路层与网络层中的定义。这里的定义大意是:在转发数据包时,根据数据包的目的地址进行寻址,从而将数据包...

    若羽

扫码关注云+社区

领取腾讯云代金券