Vue刷新页面的三种方式

我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。

原始方法：

location.reload();

vue自带的路由跳转：

this.$router.go(0);

用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。
所以，我们选择第三种方式：
3. 首先在App里面写下如下代码：

<template><div id="app"><router-view v-if="isRouterAlive"></router-view></div>
</template>
<script>export default {name: 'App',provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             return {reload: this.reload                                              }},data() {return{isRouterAlive: true                    //控制视图是否显示的变量}},methods: {reload () {this.isRouterAlive = false;            //先关闭，this.$nextTick(function () {this.isRouterAlive = true;         //再打开}) }}，}
</script>

接下来，我们就可以在需要刷新页面的组件里这样写：

export default {inject:['reload'],                                 //注入App里的reload方法data () {return {.......}},

在需要刷新页面的代码块中使用：

this.reload();

Vue刷新页面的三种方式相关推荐

Vue项目点击刷新页面的三种方式
Vue项目点击刷新页面的三种方式一.原生js刷新方式: location.reload(); 二.Vue框架自带的路由跳转方式: this.$router.go(0); 三.在App.vue页面声明 ...
Vue中刷新页面的三种方式
一.通过js原始方法刷新 <template><div><div class="header"><button @click=" ...
Vue路由传参三种方式
Vue路由传参三种方式 params传参路由属性配置传参 query传参一.params传参 this.$router.push({ name:"admin", //这里的pa ...
vue三种ajax请求方式,vue请求数据的三种方式
请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据介绍:vue-resource请求数据方式是官方提供 ...
【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
vue前端常用的三种方式模拟获取数据
前端的三种方式模拟获取数据 1⃣️.mockjs插件获取: 1.首先我们先进行安装mockjs,进入项目在终端输入:npm install mockjs --save 2.我们可以在src目录下新建m ...
Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"><!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到 ...
在一个JSP页面中包含另一个JSP页面的三种方式
转载自://http://blog.163.com/neu_lxb/blog/static/179417010201121343132918/ (1)include指令 include指令告诉容器:复 ...
php重定向页面的三种方式
PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header( ...

Vue刷新页面的三种方式

Vue刷新页面的三种方式相关推荐

最新文章

热门文章