• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

关于点击相同导航菜单对应路由页面刷新问题的思路和方案

一开始被要求这个功能我是一脸蒙蔽的,因为写了这么多vue项目,没有哪个项目要求这么做,况且,作为一个无刷新的前端项目,突然来个刷新,让我有点措不及防。

中午和同事吃饭的路由讨论了此事,他说了一个点,让我想到,说不定可以这么做,于是下午百度了一些文章,心里有了思路,顺着这个思路,成功搞定这个需求。

思路

相同的路由,是不允许重复跳转的,所以不会触发路由守卫,想通过路由守卫处理这条路走不通。

有人说通过this.$router.go(0)可以实现页面刷新,我测试了下,确实是页面刷新了,但是我要的是路由页刷新,路由页可能是某个区域,而不是整个网页,所以该方案也行不通。

最终只能选择v-if和router-view配合使用。

于是乎:

  1. vuex中存放一个变量refresh,它是一个布尔值,默认为false
  2. 路由导航按钮通过判断自己要跳转的路由name值是否和当前页面的name值相同,相同的话,将refresh改为true
  3. 在router-view所在的vue文件中,我们<router-view v-if="!refresh" />求反绑定这个vuex值,这样路由页能被重新渲染
  4. 但是,此时的路由页是被点击后移除了,我们还需要显示回来,于是watch监听这个refresh,当他为true时,我们延迟一会再改回false,这样就可以达到路由页的刷新效果
  5. 为了能有好的过渡效果,在router-view消失的时候,最好有一个loading显示

使用这种方式,我可以在任何位置触发路由页的刷新,我们只需要控制vuex的refresh值即可。

大概的代码

router-view

<template>
  <div id="admin">
    <router-view v-if="!refresh" />
    <router-loading v-else />
  </div>
</template>
<script>
  import RouterLoading from "@/components/RouterLoading";
  import _ from "lodash";
  export default {
    computed: {
      //是否刷新路由页
      refresh() {
        return this.$store.getters.refresh;
      },
    },
    methods: {
      //结束刷新
      offRefresh() {
        this.$store.commit("setRefresh", false);
      },
    },
    created() {
      //防抖动
      this.offRefresh = _.debounce(this.offRefresh, 300);
    },
    watch: {
      refresh(val) {
        if (val) {
          this.offRefresh();
        }
      },
    },
    components: {
      RouterLoading
    }
  }
</script>

因为有可能用户重复点击,加了个防抖动,可能也没啥用(watch不触发),不过以防万一,不想用lodash自己写个定时器就行了。

导航事件

这个就不多说了,直接丢方法

//刷新
 onRefresh(name) {
  if (name === this.$route.name) {
    this.$store.commit("setRefresh", true);
  }
 },

自己绑定到对应的导航按钮上即可

vuex

{
  state: {
    refresh: false, //是否刷新路由页
  },
  getters: {
    refresh(state) {
      return state.refresh;
    }
  },
  mutations: {
    setRefresh(state, value) {
      state.refresh = value;
    }
  }

}

以上就是思路和方法了,堪称完美。

0
  • 本文分类:vue 项目实战
  • 本文标签:vue路由导航刷新
  • 流行热度:已超过 262 人围观了本文
  • 最后更新:2021年01月6日 - 16时33分39秒
  • 发布日期:2021年01月6日 - 16时33分39秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码