vue-router路由组件传参,参数改变,页面不刷新问题

一、问题场景

用多个子路由指向同一个页面,通过props进行传参,并且依据参数不同请求不同的数据,实际开发中发现,参数改变后,页面不刷新
vue-router路由组件传参,参数改变,页面不刷新问题_第1张图片

二、解决办法

key要具有唯一性,一般路由中name属性是唯一的,因此key这边使用的是name
vue3中的路由解决办法:
vue-router路由组件传参,参数改变,页面不刷新问题_第2张图片
vue2路由解决办法
在这里插入图片描述

三、扩展

路由组件传参,如何在页面中接受?
在页面定义props,其中props的参数(searchKey)与上面路由文件中的props的参数(searchKey)必须一致
vue-router路由组件传参,参数改变,页面不刷新问题_第3张图片

你可能感兴趣的:(vue.js,前端)