### 点击侧边栏，刷新当前路由

最新推荐文章于 2024-08-07 10:52:43 发布

慢腾腾的急性子

最新推荐文章于 2024-08-07 10:52:43 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue-router

本文链接：https://blog.csdn.net/yujie0716006/article/details/84328148

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

应用场景：点击侧边栏，来重新刷新当前的页面
目前情况：用vue/vue-router创建的spa(单页面开发)项目，用户点击当前高亮的路由并不会刷新view，因为vue-router会拦截你的路由，他判断你的url没有任何变化，所以他不会触发任何钩子或是view变化。
强制刷新页面方法：

这些方法目前只适用在使用点击触发路由变化的情况下`this.$router.push()`

加时间戳，注意：此方法不管用
在网上面找了好多资料，都有说这个方法的。但是，应用在项目上面去不管用。
使用vue-router中的历史记录go

    // 判断是否点击的是当前路径的路由
    this.$router.go(0)
  此方法会强制刷新整个浏览器，浏览器会出现`白页面`,加载时间长。用户的体验很不好（不推荐）。

使用provide/inject方法

    *** 利用v-if控制router-view，在路由容器组件里，在要刷新页面的路由出口处，实现一个刷新的方法
    1.********** 在APP.vue文件中 **********
    <template>
		<router-view v-if='isRouterAlive' />
    </template>
    export default: {
    // 向后代注入这个provide中的所有内容
    provide(){
	     return {
		      reload: this.reload   // 调用的是menthods中的方法
	      }
     },
     data(){
	      return {
		       isRouterAlive: true
	       }
      },
      methods:{
	       reload(){
	       // 调用这个reload()函数时，v-if=false,页面会将router-view中的DOM元素全部删除，当页面更新完毕时，再重新创建一个router-view出口。这时里面的页面内容会重新加载。
		        this.isRouterAlive = false;
		        this.$nextTick(() => {
			         this.isRouterAlive = true
		         })
	        }
       }
     }
     2.********** 在需要接受这个函数的子组件中 **********
     export default{
	      // 接受这个函数
	      inject: ['reload'],
	      // 在函数中调用使用
	      this.reload()
      }
    使用provide/injecr方法：
    **provide:**将我们想要提供给后代组件的数据/方法
    **inject:**用来接收我们想要添加在这个实力上的属性
    使用这个方法，可以也可以将isRouterAlive这个状态设置在VUEX中，进行变更

在路由上面添加时间戳，但是要和router-view一起使用

    1. 在菜单的路由跳转上绑定一个随机query参数，例如时间戳或是随机数
     this.$router.push({
      path:'跳转的路径 ',
      query:{
	       t: Date.now()
       }
      })
	    2. 在路由容器上面绑定key值， 他会通过key值的变化强制刷新该组件下的内容。会重新组建
	    当路由改变时，携带有随机数，每次展示的内容都会在不同的路由出口下面
	    <router-view :key='$router.path+ $router.query.t' />