如何解决 vue-router 相同路由参数不相同的情况下，页面不刷新问题

灰糖 • • 笔记

这种情况出现的原因是 vue-router 在处理时判断这是同一个页面，所以就不会刷新页面。

1、父级组件 router-view 添加 key

既然 vue-router 不能识别这是两个页面，那就要去告知它是不同的，只要在父级组件中 router-view 标签加上 key 值即可，key 值推荐使用当前页面路由。

// vue 2.x
<router-view :key="$route.fullPath" />

// vue 3.x
<router-view :key="route.fullPath" />

import { useRoute } from 'vue-router'
const route = useRoute()

2、中转路由

另一种方法是定义一个中转的路由，在路由的组件中定义跳转回问题页面。

// 代码参考 vue 2.x
<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  }
}
</script>

3、只刷新数据，不刷新页面

相同路由，不同参数的页面，往往只是页面数据存在不同，那只要在切换路由时将数据替换不就好了吗。

可以把获取数据的相关方法封装在一个函数中，监听路由变化，在路由发生变化时调用该函数即可实现效果。

版权声明：
作者：灰糖
链接：https://longdada.me/rhjjvuerouterxtlybsbxtdqkxymbsxwt/
来源：灰糖笔记
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录