Vue Router如何解决多路由复用同一组件导致页面不刷新的问题？

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

目录 + 简介 + 问题重现 + 代码 + 测试 + 解决方案 + 方案1：导航守卫 + 方案2：watch监听路由 + 方案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中，相同的组件实例将被重复使用。