当多个路由地址对应同一组件时,切换路由组件不刷新的问题

在vue官方文档中进行了如下描述:

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。           

解释一下:当我们使用动态路由或者在路由上拼接参数时,进行页面组件跳转,如果前后跳转都使用了同一个组件,这就导致我们后面的路由跳转会使用前一次组件实例,因此组件不会重新渲染加载

当我们想传递参数后,组件重新渲染组件实例,可以使用vue官方文档提供的方案:

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象

const User = {

    template: '...',

    watch: {

        '$route' (to, from) {

            // 对路由变化作出响应...

            }

       }

}

如果我们对"路由变化作出响应是"==============>刷新当前组件的话

可以使用:this.$router.go(0)  来刷新当前组件

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容