在vue项目开发中实现刷新当前路由页面

在最近开发的项目中入到一个问题：管理员根据自己的身份角色，可以随意切换不同的模块内容，同一模块下又有多种公司的角色；
实现这一功能的基本方式就是根据id与权限进行路由跳转，同时坑也来了！！！！！！
不同的路由跳转页面是随即刷新的，同一路线下仅改变id值则页面不刷新，数据就没有改变；
解决方案

1、方法一

最初的解决方式很简单，仅仅是使用了

window.location.reload();//实现页面的刷新
//也可使用下面方式
this.$router.go(0);

先说下这两个方法存在的问题
1、都能解决页面刷新的需求；
2、不好之处就是刷新的时候有时页面白屏时间太长，体验不好；
于是就有了下面的解决方法

2、新建解决方案

1、先建一个空的页面blank(PageBlank)，加入到路由中

<template>
<!-- 空白的页面，用于路由跳转过过渡，实现页面的刷新 -->
  <div></div>
</template>
<script>
export default {
  name: 'pageBlank',
  data () {
    return {

    }
  },
  beforeRouteEnter(to,from,next){
    // 获取商品订单
    next( vm => {
      let query = vm.$route.query.path;
      vm.$router.push({ path: query });
    })
  },
  methods:{

  }
}
</script>

2、路由配置

export default new Router({
  routes: [
    {
      path:'/index/PageBlank',
      name: 'PageBlank',
      component: PageBlank,
      meta: {
        
      }
    }
  ]
});

3、在需要切换角色的组件中定义一个切换方法，该方法已被添加到公共模块中

this.$router.push({ path: '/index/PageBlank', query: { path: path } });

path就是你要跳转或者刷新的路由页面；
原理就是先跳转到一个空白页面然后立即再跳转到目标路由，实现跳转刷新功能；
该方法会在url地址栏中出现地址的快速切换的变动；