Vue实现无痕刷新

一、什么是无痕刷新

在不刷新浏览器的情况下，实现页面的刷新。

传统的刷新页面方式

window.location.reload()原生 js 提供的方法

this.$router.go(0)vue 路由里面的一种方法

这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏

二、实现无痕刷新

先在全局组件注册一个方法，用该方法控制 router-view 的显示与否，然后在子组件调用；

用 v-if 控制 <router-view></router-view> 的显示；

provide：全局注册方法；

inject：子组件引用 provide 注册的方法

APP.vue

需要进行无痕刷新的页面

三、provide/inject的使用

简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量(这种方式也可以实现组件传值，父传子)，provide / inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。这个东西很类似于React中的context，实现跨组件传值

  • provide 选项应该是：一个对象或返回一个对象的函数
  • inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

provide

inject

原文地址：https://www.cnblogs.com/nanianqiming/p/11784873.html

时间： 2024-11-06 09:53:13

Vue实现无痕刷新的相关文章

vue 导航栏刷新页面定位:

不想分析可以直接看解决方案 问题描述: 通过router的route-link可以实现导航栏的功能,并且可以跳转到相应页面 但是刷新页面导航栏没有定位到当前页面一栏. 问题分析: 定位导航栏步骤 1. 点击导航栏对当前一栏添加class <a @click="toPath(item.note)" :class="{ 'active': item.note === data.currentPath }"> {{item.name }} </a>

Vue页面手动刷新，导航栏激活项还原到初始状态问题解决方案

场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterprise/list),顶部导航激活项还原到初始状态(这里默认是"工作台"项). 原理:每次刷新都会重新实例化Vue,也就是会调用created方法. <template> <el-menu :default-active="defaultActiveIndex&

vue项目如何刷新当前页面

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

nignx部署Vue单页面刷新路由404问题解决

在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题 说明: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({

vue部署后刷新404问题

为什么会404NotFound Internet Information Services (IIS) 第一步:安装 IIS UrlRewrite 第二步:配置重写URL规则 在你的网站根目录中创建一个 web.config 文件,内容如下: <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <r

Vue 实现前进刷新，后退不刷新的效果

需求一:在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新. 也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新. 解决方案 在 App.vue设置: <keep-alive include="list"> <router-view/> </keep-alive> 假设列表页为 list.vue,详情页为 detail.vue,这两个都是子组件. 我们在 kee

vue打包后刷新页面报错：Unexpected token &lt;

前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有问题,只有生产环境有问题,怪点二是只有一个页面有问题,其他页面完全正常 正文 报错截图: 根据上面的情况和以往经验,应该在index.html页面及发生错误的页面定位问题,但均解决不了问题. 最后找到此项目的路由处,经过多次测试,解决问题,也确定了问题原由,原来是:路由中path的值不能以小写m开头,否则

Vue 参数传递及刷新后依旧存在

获取参数方式有两种: 1.params2.query 第一种方式: params this.$router.push({name:'Hello',params:{name:'zs',age:'22'}});name:组件中的命名params 中两个参数分别为name,age 跳转 hello这个组件,获取参数值: var name = this.$route.params.name; var age = this.$route.params.age; 这样就会获取到相应参数 浏览器地址为 htt

Vue,数据更新不能刷新视图

//参一当前要更新的数据对象 //参二要改变的数组元素的下标,//参三:新数据(要更新到视图中的新数据) Vue.set(this.todos, inde, arr[inde]);