背景

项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.

思路

(1)如果页面简单,调用接口刷新数据即可.
(2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页面的方式下面整理了4种方式来实现刷新当前页面,每种方式的思路不同,各有优缺点

实现

方式1-通过location.reload和$router.go(0)方法

(a)概述

通过location.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面
优点:足够简单
缺点:会出现页面空白,用户体验不好

(b)代码

<!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)代码

<!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)代码

<!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)代码

<!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>