admin管理员组文章数量:1633929
vue 如何实现多个路由共用同一个页面组件时，每次进入路由页面数据不被缓存的处理方案
- vue中多路由公用一个页面组件时，数据缓存，第一次进入对应路由页面加载完成之后，重新进入应用此组件的路由时，页面数据被缓存
- 记住:vue中就算跳的是同一个页面，路由不一样，那这个页面就只会在第一次进入的时候挂载，之后访问此页面都是走的缓存数据！！！
- 方法一：唯一key值
- 方法二：通过监听路由的方法来重新触发钩子函数
vue中多路由公用一个页面组件时，数据缓存，第一次进入对应路由页面加载完成之后，重新进入应用此组件的路由时，页面数据被缓存
前两天做项目遇到一个需求，四个页面需要公用一个页面，只不过路由不相同，刚开始做的时候想的不是很全面，觉得根据对应菜单栏的点击事件就可以进入到对应的页面，而且每次进入页面应该会执行actived,mounted构造函数。直到写完对应的逻辑处理之后，才发现这是一个错误的想法！！！
记住:vue中就算跳的是同一个页面，路由不一样，那这个页面就只会在第一次进入的时候挂载，之后访问此页面都是走的缓存数据！！！
针对此bug的出现，在网上查了相关资料之后，就目前这两种方法解决起来比较快速且容易
方法一：唯一key值
在这里插入代码片
1.在app.vue文件中：
<router-view :key="key" /> // 必须加上key属性，这样每次进入页面时此页面对应的钩子函数才会都重新触发
computed: {
key() {
return this.$route.fullPath //保证 key 唯一性就可以了，保证不同页面的 key 不相同
}
},
2.在index.js文件中，让多个路由共用同一个组件，路径指向同一个组件。保证路由path和name属性具有唯一性
{
path: '/RiskFactorsManagement',
name: 'RiskFactorsManagement',
component: () => import('../views/factor/RiskFactorsManagement.vue')
},
// 评估评价因子管理
{
path: '/EvaluationfactorManagement',
name: 'EvaluationfactorManagement',
component: () => import('../views/factor/RiskFactorsManagement.vue')
},
多个页面公用同一个组件时：通过以上方法，会使得切换所有子组件都重新渲染相应子组件。
如果父组件下只有A B 组件需要共用，还有C D组件不需要公用，切换C D组件也同样会重新渲染C D ，影响性能。
并且每次切换路由会闪烁一下。因为切换后所有钩子函数都重新触发了。
方法二：通过监听路由的方法来重新触发钩子函数
1.在对应的组件页面中利用watch监听路由：
watch:{
$route: {
handler:'handle', // 因为页面路由不同，所以每次进入页面都会触发监听方法
deep:true // 深度监听
}
},
2.在methods方法中
methods:{
handle() {
if(this.$route.fullPath=='/RiskFactorsManagement'){
//在这里获取并处理该路由下所需要的数据。
}
}
**以上两种方案均可，但是相比第一种方案，这里我更加倾向于于第二种方案**
版权声明：本文标题：vue中多路由共用一个页面组件时页面被缓存 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729176628a1188801.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论