上虞宇普电器网站建设,农业网站建设策划书,做外贸公司网站多少钱,图片类网站如何做优化问题 在做项目的过程中,有这么一个场景#xff1a;多个组件通过配置路由,都跳转到同一个组件,他们之间的区别就是,传入的参数不同.请看router对象#xff1a; userCenterLike: {name: user-center,params: {index: 0}},userCenterHistory: {name: user-center,params: {index…问题 在做项目的过程中,有这么一个场景多个组件通过配置路由,都跳转到同一个组件,他们之间的区别就是,传入的参数不同.请看router对象 userCenterLike: {name: user-center,params: {index: 0}},userCenterHistory: {name: user-center,params: {index: 1}}复制代码 仅仅只是传入的index的值不同.但是在查看效果的过程中我发现目标组件user-center始终只渲染一次,也就是说,第二次访问到同一路由的时候,Vue那些生命周期的钩子已经没有用了,根本无法通过this.$route.params.index来获取参数. 解决方法 Vue的官网已经给出了详细解释 提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用.因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效.不过,这也意味着组件的生命周期钩子不会再被调用 也就是说,一开始Vue就是这样设计的,为了节省每次都要重建页面的内存开销,所以就复用.那么如何解决呢 在这里,我们可以通过监听路由的变化来获取参数并进行操作,在watch钩子里面 $route(to,from){if (this.$route.params.index ! undefined) {console.log(this.$route.params.index);}}
复制代码这样就可以在路由变化的同时,将我们的参数传入,实现页面的数据刷新. 转载于:https://juejin.im/post/5cbadfb76fb9a0688e067921
