vue-Cli路由刷新（某情景下的解决方案）

最新推荐文章于 2023-08-30 10:25:30 发布

兰_1999

最新推荐文章于 2023-08-30 10:25:30 发布

阅读量511

点赞数 2

分类专栏：原创

本文链接：https://blog.csdn.net/weixin_43436925/article/details/97389350

版权

原创专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文探讨了在使用相同组件展示不同内容时遇到的路由刷新问题，并提出了一种解决方案：通过引入第三方页面进行中转，避免直接刷新导致的用户体验下降。具体实现包括修改上游路由链接，注册中游第三方页面，以及下游第三方页面的重定向逻辑。

摘要由CSDN通过智能技术生成

分析：路由刷新是在路由的组件切换的时候才会自动刷新的，created函数才能执行。倘若几篇博客使用的是同一个组件展示，只有传入的参数不同，浏览器的url地址组件部分的地址不变化，则组件不会重新加载。

如下图：从博客1切换到博客2时，右侧组件不会自动刷新。

倘若通过左侧点击执行类似F5的强制刷新，则会出现空白页面间隙，影响用户体验

在这里插入图片描述

解决方法：

引入第三方页面中转，第三方页面可以命名为refresh.vue,过程中refresh组件并未加载，进入之前解析地址，用解析到的地址替换本页面，就中转完毕。

原来是:

<router-link to="/edit/1">博客1</router-link>

那么现在就是：

改按钮的路由地址（上游）

<router-link to="/refresh/edit/1">博客1</router-link>

注册第三方页面（中游）

//router.js里面注册refresh
import refresh from './views/refresh'//import部分

{path:'/refresh/edit/:id',name:'refresh',component:refresh}//路径配置部分

第三方页面内容为（下游）

//第三页面refresh.vue里面的内容，起到中转的作用。
<template>
    <div>
        
    </div>
</template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(to.path.slice(8,))//replace是用（）里面的页面替代本页面(空页面）
      //to.path是"/refresh/edit/1",slice(8,)之后便是"/edit/1"，与目的一致
    })
  }
}
</script>