Vue Router如何处理多路由共用组件不刷新的刷新问题？

本文共计1575个文字，预计阅读时间需要7分钟。

目录+简介+问题重现+代码+测试+解决方案+案例1：导航守卫+案例2：watch监听路由+$route+案例3：父组件router-view指定key+其他网址+简介+说明+文本介绍如何解决Vue多路由共用同一组件页面不刷新问题

目录

• 简介
• 问题复现
• 代码
• 测试
• 解决方案
• 方案1：导航守卫
• 方案2：watch监听$route
• 方案3：父组件router-view指定key
• 其他网址

简介

说明

本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题。

多路由复用同一组件的场景

• 多路由使用同一组件

  比如：添加博客（path为：/addBlog）和编辑博客（path为：/editBlog）都对应同一个组件（EditBlog.vue）

• 动态路由

  比如：用户详情页采用动态路由，其path为：/user/:id，组件都是UserDetail.vue

原因分析

Vue中，相同的组件实例将被重复使用。如果两个路由都渲染同个组件，复用比销毁再创建更高效。不过，复用会导致组件的生命周期函数不会被调用。