Vue实现刷新当前路由

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>
  <style>
  </style>

实现效果

 

posted @ 2019-02-19 09:36  狗尾草的博客  阅读(24216)  评论(1编辑  收藏  举报