记录--vue刷新当前页面
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
背景
项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.
思路
-
(1)如果页面简单,调用接口刷新数据即可.
-
(2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页面的方式 下面整理了4种方式来实现刷新当前页面,每种方式的思路不同,各有优缺点
实现
方式1-通过location.reload和$router.go(0)方法
(a)概述
通过location.reload
和$router.go(0)
都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5
键刷新页面
优点:足够简单
缺点:会出现页面空白,用户体验不好
(b)代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <! DOCTYPE html> < html lang="en"> < 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 class="container"> < div class="aside">左侧菜单</ div > < div class="main">< 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 > |
(c)预览
方式2-通过空白页面
(a)概述
通过$router.replace
方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router
切换页面会把页面销毁并新建新页面的特性
优点:不会出现页面空白,用户体验好
缺点:地址栏会出现快速切换的过程
(b)代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <! DOCTYPE html> < html lang="en"> < 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 class="container"> < div class="aside">左侧菜单</ div > < div class="main">< 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 > |
(c)预览
方式3-通过provide和inject
(a)概述
通过在父页面的<router-view></router-view>
上添加v-if的控制
来销毁和重新创建页面的方式刷新页面,并且用到provide
和inject
实现多层级组件通信方式,父页面通过provide
提供reload
方法,子页面通过inject
获取reload
方法,调用方法做刷新
优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好
缺点:实现稍复杂,涉及到provide
和inject
多层级组件间的通信,和v-if
控制组件创建和销毁,和$nextTick
事件循环的应用
(b)代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <! DOCTYPE html> < html lang="en"> < 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 class="container"> < div class="aside">左侧菜单</ div > <!-- 通过v-if实现销毁和重新创建组件 --> < div class="main">< 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 > |
(c)预览
方式4-通过给router-view绑定key属性
(a)概述
通过在父页面的<router-view></router-view>
上绑定和切换key
属性,来销毁和重新创建页面的方式刷新页面,具体的方式是指定key的值为$route.fullPath
,通过在子页面通过this.$router.push(this.$route.path+'?t='+Date.now())
来改变$route.fullPath
的值,从而刷新页面
优点:不会出现页面空白,并且代码简单 缺点:地址栏出现随机参数
(b)代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <! DOCTYPE html> < html lang="en"> < 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 class="container"> < div class="aside">左侧菜单</ div > <!-- 通过:key绑定$router.fullPath值,当fullPath发生改变,触发组件重新渲染 --> < div class="main">< router-view :key="$route.fullPath"></ router-view ></ div > </ div > `, created() { console.log('框架页加载') } } //首页 let Home = { template: ` < div > 首页 < button @click="onClick">刷新</ button > </ div > `, created() { console.log('首页加载') }, methods: { onClick(){ this.$router.push(`${this.$route.path}?t=${Date.now()}`) } }, } //路由配置 let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]} ] }) Vue.use(VueRouter) //根组件 new Vue({ router, el: '#app' }) </ script > </ html > |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了