首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于

使用key属性，Vue刷新当前页面

2021年08月06日 发布 阅读(10053) 作者：Jerman

vue项目，不使用window.location.reload()，如何刷新当前页面？

基本原理，利用key属性，key变化时组件会重新渲染

main.vue

  1. // 假如需要刷新的页面，都是基于`main.vue`的`<router-view>打开`
  2. ...
  3. <div>
  4.     <router-view
  5.         :key="this.refreshKey ? this.refreshKey : this.$route.fullPath"
  6.     />
  7. </div>
  8. ...
  10. computed: {
  11.    ...mapGetters(['refreshKey']),
  12. }

vuex
vuex设置了一个全局变量refreshKey

  1. export default new Vuex.Store({
  2.   state: {
  3.     // 刷新key
  4.     refreshKey: '',
  5.   },
  6.   mutations: {
  8.     // 设置刷新
  9.     setRefreshKey(state, key) {
  10.       state.refreshKey = key;
  11.     },
  12.   },
  13.   getters: {
  14.     refreshKey: state => state.refreshKey,
  15.   },
  16.   actions: {},
  17.   modules: {},
  18. });

网络报错时，显示的Error页面
报错页面中，我们点击刷新按钮，设置刷新Key，每次刷新的时候，key要不一样，所以用了时间戳

  1. <template>
  2.   <div>
  3.     <div class="loading-error">
  4.       <p>网络错误，请检查网络或刷新页面重试</p>
  5.       <p>如果网络没问题，多次刷新后还是不行，欢迎反馈给我们</p>
  6.       <a-button type="primary" @click="refresh" style="margin-top: 20px"
  7.         >刷新</a-button
  8.       >
  9.     </div>
  10.   </div>
  11. </template>
  13. <script>
  14. export default {
  16.   methods: {
  17.     refresh() {
  18.       this.$store.commit('setRefreshKey', new Date().getTime());
  19.     },
  20.   },
  21. };
  22. </script>
  23. <style lang="less" scoped>
  24. .loading-error {
  25.   margin: 0 auto;
  26.   text-align: center;
  27.   padding: 100px 0;
  28.   svg {
  29.     margin-bottom: 20px;
  30.   }
  31.   p {
  32.     color: #999;
  33.   }
  34. }
  35. </style>

Router
正常跳转路由时，清空refreshKey

  1. router.beforeEach((to, from, next) => {
  2.   store.commit('setRefreshKey', '');
  4.   next();
  5. });
版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处

© 2018 IMQIANDUAN.COM 粤ICP备18143223号