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

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

2021年08月06日 发布 阅读(9204) 作者: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. ...
  9. computed: {
  10. ...mapGetters(['refreshKey']),
  11. }

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

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

网络报错时,显示的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>
  12. <script>
  13. export default {
  14. methods: {
  15. refresh() {
  16. this.$store.commit('setRefreshKey', new Date().getTime());
  17. },
  18. },
  19. };
  20. </script>
  21. <style lang="less" scoped>
  22. .loading-error {
  23. margin: 0 auto;
  24. text-align: center;
  25. padding: 100px 0;
  26. svg {
  27. margin-bottom: 20px;
  28. }
  29. p {
  30. color: #999;
  31. }
  32. }
  33. </style>

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

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