这篇文章主要介绍了Vue中如何刷新当前页面的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中如何刷新当前页面文章都会有所收获，下面我们一起来看看吧。项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新
这篇文章主要介绍了Vue中如何刷新当前页面的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中如何刷新当前页面文章都会有所收获，下面我们一起来看看吧。
项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.
(1)如果页面简单,调用接口刷新数据即可.
(2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页面的方式下面整理了3种方式来实现刷新当前页面,每种方式的思路不同,各有优缺点
方式1-通过location.reload和$router.go(0)方法
(a)概述
通过location.reload和$router.Go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面
优点:足够简单
缺点:会出现页面空白,用户体验不好。
(b)代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta Http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style>* {padding:0;margin:0;}.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}.aside{ width:200px;background-color: #d3Dce6; }.main { flex: 1; } </style></head><body> <div id="app"> <router-view></router-view> </div></body><script>//框架页let Layout = { created() { console.log('框架页加载') }, template: ` <div> <div>左侧菜单</div> <div><router-view></router-view></div> </div> `}//首页let Home = { template: ` <div> 首页 <button @click="onClick">刷新</button> </div> `, created() { console.log('首页加载') }, methods: { onClick(){ // 通localtion.reload或者this.$router.go(0)实现整体刷新页面,会出现页面闪烁 // location.reload() this.$router.go(0) } },}//路由配置let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]} ]}) Vue.use(VueRouter)//根组件new Vue({ router, el: '#app'})</script></html>
方式2-通过空白页面
(a)概述
通过$router.replace方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router切换页面会把页面销毁并新建新页面的特性
优点:不会出现页面空白,用户体验好
缺点:地址栏会出现快速切换的过程
(b)代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style>* {padding:0;margin:0;}.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}.aside{ width:200px;background-color: #d3dce6; }.main { flex: 1; } </style></head><body> <div id="app"> <router-view></router-view> </div></body><script>//框架页let Layout = { created() { console.log('框架页加载') }, template: ` <div> <div>左侧菜单</div> <div><router-view></router-view></div> </div> `}//首页let Home = { template: ` <div> 首页 <button @click="onClick">刷新</button> </div> `, created() { console.log('首页加载') }, methods: { onClick(){ //使用replace跳转后不会留下 history 记录,并通过redirect传递当前页面的路径 this.$router.replace(`/blank?redirect=${this.$route.fullPath}`) } },}//空白页面let Blank = { created(){ console.log('空白页加载') //重新跳回之前的页面 this.$router.replace(this.$route.query.redirect) }, template: ` <div></div> `}//路由配置let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]}, //配置空白页面的路由 {path: '/blank', component: Layout, children:[ {path: '', component: Blank} ]} ]}) Vue.use(VueRouter)//根组件new Vue({ router, el: '#app'})</script></html>
方式3-通过provide和inject
(a)概述
通过在父页面的<router-view></router-view>上添加v-if的控制来销毁和重新创建页面的方式刷新页面,并且用到provide和inject实现多层级组件通信方式,父页面通过provide提供reload方法,子页面通过inject获取reload方法,调用方法做刷新
优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好
缺点:实现稍复杂,涉及到provide和inject多层级组件间的通信,和v-if控制组件创建和销毁,和$nextTick事件循环的应用
(b)代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style>* {padding:0;margin:0;}.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}.aside{ width:200px;background-color: #d3dce6; }.main { flex: 1; } </style></head><body> <div id="app"> <router-view></router-view> </div></body><script>//框架页let Layout = { template: ` <div> <div>左侧菜单</div> <!-- 通过v-if实现销毁和重新创建组件 --> <div><router-view v-if="isRouterAlive"></router-view></div> </div> `, created() { console.log('框架页加载') }, // 通过provide提供reload方法给后代组件 provide(){ return { reload: this.reload } }, data(){ return { isRouterAlive: true } }, methods: { async reload(){ this.isRouterAlive = false //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件 await this.$nextTick() this.isRouterAlive = true } }}//首页let Home = { template: ` <div> 首页 <button @click="onClick">刷新</button> </div> `, created() { console.log('首页加载') }, //通过inject获取祖先元素的reload方法 inject: ['reload'], methods: { onClick(){ this.reload() } },}//路由配置let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]} ]}) Vue.use(VueRouter)//根组件new Vue({ router, el: '#app'})</script></html>
关于“vue中如何刷新当前页面”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue中如何刷新当前页面”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。
--结束END--
本文标题: vue中如何刷新当前页面
本文链接: https://www.lsjlt.com/news/348560.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0