vue项目刷新当前页面

最新推荐文章于 2023-05-23 11:02:55 发布
最新推荐文章于 2023-05-23 11:02:55 发布
阅读量724 收藏
点赞数
分类专栏： vue 文章标签： vue完美刷新 vue刷新

1、因项目需要刷新当前页，但是不能出现空白，router.go(0)等都不太好使，所用我选择用 provide/inject。在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。

2、打开app.vue设置

3、子组件使用

在需要刷新的地方设置 this.reload() 就可以了

lilongwei4321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目如何刷新当前页面
qq_43146962的博客
05-29 176
解决办法： 1.用vue-router重新路由到当前页面，但是页面是不进行刷新的 2.采用window.reload()，或者router.go(0)刷新时，但是整个浏览器进行了重新加载，闪烁，体验不好 3.推荐办法：用provide / inject 组合 原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效 在App.vue，声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载 <template>
2024年Web前端最全vue项目如何刷新当前页面，2024大厂前端知识点总结+面试题解析
最新发布
2301_79985012的博客
05-11 319
现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好。但是，试过的会发现用vue-router重新路由到当前页面，页面是不进行刷新的，根本没有任何作用~所以这个方法out！这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，可采用。
vue项目如何刷新当前页面的方法
08-27
主要介绍了vue项目如何刷新当前页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
页面刷新：vue项目如何刷新当前页面 请看
weixin_46733392的博客
06-20 326
1、最直接整个页面重新刷新： location.reload() 第一种 this.$router.go(0) 第二种 2、provide / inject 组合 方式是我试过最实用的，下面用项目截图给大家说明下：首先，要修改下你的app.vue: 然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行 ...
vue项目刷新当前页面的方法
m0_49515138的博客
08-26 148
vue项目刷新当前页面的三种方法 provide / inject 组合 方式是我试过最实用的，下面用项目截图给大家说明下：首先，要修改下你的app.vue 通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了 isRouterAlive //true or false 来控制 然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行 ...
vue项目刷新当前页面的三种方法
10-17
主要介绍了vue项目刷新当前页面的三种方法，本文图文并茂给大家介绍的非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue页面刷新记住页面状态的实现
10-15
在Vue开发中，有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态，比如搜索条件、筛选选项等。...通过以上方法，我们可以有效地在Vue项目中实现在页面刷新后记住和恢复用户的页面状态，提高用户体验。
vue单页面实现当前页面刷新或跳转时提示保存
10-17
主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下
vue-element-admin点击侧边栏刷新当前页面
哆啦A梦的百宝袋的博客
05-23 1385
在用 spa(单页面应用) 这种开发模式之前，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了，用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化。
vue刷新当前页面
EEstefan的博客
04-18 95
1.整个页面重新刷新 //第一种 location.reload() //第二种 this,$router.go(0) 2.新建一个空白页，然后再跳回来 this.$router.replace({ path: "" }) 3.provide/inject组合使用
vue-admin-element页面局部刷新
搞笑范fan
06-17 488
vue-admin-template 局部刷新，单页面刷新
vue-element-admin 实现一个按钮统一刷新页面
weixin_41766902的博客
04-02 2017
接着上一个说起，vue-element-admin 标签页面如何刷新，只能单独点击到标签上才能刷新，感觉特别不方便，所以产品希望和到一块处理。 1.第一步 2.第二部上代码 <template> <div id="tags-view-container" class="tags-view-container"> <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScrol
vue-element-admin局部刷新页面
a125129167的博客
05-15 6600
在写业务需求的时候遇到了一个帮助文档的需求，里面存在大量静态页面，有考虑几个方案. 组件引入 嵌套路由局部刷新 后面考虑了考虑了如果频繁引入组件会导致不好修改。这里就想到了嵌套路由的局部刷新。因为借鉴了友盟,华为云的文档中心Tree树形控件局部刷新。就考虑如何去使用去做. vue-element-admin项目大家在使用的时候会发现他会自带一个页面切换动画效应。就算我们写好了局部刷新的路由代码，也会产生动画。这边就在路由的meta属性加了一个showZj参数,true则不刷新,fal...
vue实现分享功能，百度分享，需要刷新页面才显示的问题
qq_39516866的博客
09-30 2000
在beforeCreate中加上 window._bd_share_main = “”; 
axios无痛刷新
qq_38140894的博客
12-14 674
vue axios请求新的token，无痛刷新 import {serialize} from '@/util/util' import {getStore} from '../util/store' import NProgress from 'nprogress' // progress bar import errorCode from '@/const/errorCode' import router from '@/router/router' import {Message} from 'ele
vue3 刷新当前页面
06-09
Vue3中可以通过以下两种方式刷新当前页面： 1. 使用`location.reload()`方法刷新整个页面： ```js methods: { refreshPage() { location.reload(); } } ``` 在需要刷新页面的方法中调用`refreshPage()`即可刷新当前页面。 2. 在Vue3组件中使用`key`属性刷新局部页面： ```html <template> <div :key="componentKey"> <!-- your component content here --> </div> </template> ``` 在需要刷新页面的时候，更新`componentKey`的值即可刷新页面： ```js methods: { refreshPage() { this.componentKey += 1; } }, data() { return { componentKey: 0 }; } ``` 这样做的原理是，Vue3在重新渲染组件时，会对比组件的`key`属性值是否发生变化，如果变化了，就会重新创建组件并渲染。因此，通过更新`key`属性的值，可以实现局部页面的刷新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值