Vue点击当前路由实现刷新

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

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

思路

点击当前菜单栏时，因为要进行跳转的路由和当前路由相同，所以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>