vue使用$router.push()或者$router.go(),重新返回上一页不走生命周期
2023-12-13 11:21:31
是因为在App.vue中,vue路由(router-view)组件使用路由缓存组件(keep-alive)包裹着,导致不重新走生命周期,这样可以提高运行效率,但有时候,我们需要重新加载生命周期刷新数据。
解决方案:
在router-view组件中添加key值,唯一标识;
我建议你可以给指定页面添加随机的指定标识就行,比如,我下面在计算属性中做了判断,当this.$route.name等于‘home’的时候,每次生成的key值都不一样,达到重新走生命周期的效果,其它页面还是走缓存;
<template>
<div id="app">
<keep-alive >
<router-view :key="key"></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed:{
key(){
if(this.$route.name === 'home'){
return this.$route.name + Math.random()
}else{
return this.$route.name
}
}
}
};
</script>
<style>
.app{
display: flex;
}
.el-menu-vertical-demo{
width: 200px;
height: 100vh;
}
</style>
文章来源:https://blog.csdn.net/weixin_47586598/article/details/134879513
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!