Vue实现刷新当前路由

Vue点击当前路由实现刷新

Vue点击当前路由实现刷新思路Code实现效果

前言：在后台管理系统中，有这样一个需求点击当前菜单栏时，页面依旧可以刷新。

点击当前路由实现数据请求页面刷新

思路

点击当前菜单栏时，因为要进行跳转的路由和当前路由相同，所以router.push(当前路由)并不会执行。所以需要借由第三方组件来实现。

判断是否点击的当前路由，如果是则跳转到空白的第三方组件，并传递当前路由。在空白组件中created的生命周期中接受参数，并执行页面跳转。此时页面不会显示任何内容就开始进行跳转，所以速度的问题不用担心。视觉上的效果就是点击当前路由后，页面刷新请求数据。实际路由已经跳转了两次。

Code

//点击路由进行跳转操作
  jump(url) {
      //判断是否是当前路由
      if(url == this.$route.path) {
          this.$router.push({
              path: 'redirect',
              query: rul
          })
      } else {
          this.$router.push({
          path: url
          })
      }
  }

  ​

空白组件：

<template>
    <div></div>
  </template>
  <script>
  export default {
    data() {
      return {
      }
    },
    created() {
      let url = this.$route.query;
      let str = '';
      for(let i in url) {
        str += url[i];
      }
      const path = this.$route.query;
      this.$router.push({
        path: str,
      });
    }  
  }
  </script>
  <style>
  </style>

实现效果