跳转同一个路由报错,希望跳转同一个路由刷新页面

在做官网时,点击顶部导航栏或者底部的目录栏进行路由跳转页面切换时,多次点击同样的路由会报错。

image
image

现在需要的效果是,点击同样的导航不报错,并且刷新页面

顶部导航栏是通过element组件el-menu来实现的通过组件的属性进行路由跳转,底部是同步点击事件触发this.$router.push('path')实现的

  1. 方法一
    如果要点击不报错可以通过当前路由this.$route.name与要跳转的path来进行判断,如果相同则不触发路由跳转。这样可以实现点击相同的导航栏步报错,直接拦截了路由跳转事件。
    但是现在要现在点击相同的导航不会刷新页面

  2. 方法二

this.$router.push({
        path: path,
        query: {
          //Date.now()时间戳一串数字 当前时间
          t: Date.now()
        }
      })
<el-main>
  <!-- :key="$route.query.t"每次根据不同时间戳来刷新页面 -->
  <router-view :key="$route.query.t"/>
</el-main>

通过这个方式就可以点击相同路由跳转不报错,并且刷新页面,但是这个页面url上面会带着时间
image
其实这个也无伤大雅

posted @ 2021-12-04 10:00  嘿!那个姑娘  阅读(409)  评论(0编辑  收藏  举报