vue路由钩子函数beforeRouteUpdate
前言当跳转跳转同一个路由地址时,此时这个组件会被复用。在这种情况下,传递过来的参数不会发生变化,因为组件复用了不会再重新创建,遇到这种问题的同学不要慌解决办法斜体样式还是有的!问题当前我有一个home.vue和一个A.vue组件此时我点击了跳转A,传递的参数是1111,当我点击跳转A2传递的是222但是页面显示的还是1111home看的了吧参数传递过来了但是页面并没有刷新,此时就是因为vue复用了
·
前言
当跳转跳转同一个路由地址时,此时这个组件会被复用。在这种情况下,传递过来的参数不会发生变化,因为组件复用了不会再重新创建,遇到这种问题的同学不要慌解决办法斜体样式还是有的!
问题
当前我有一个home.vue和一个A.vue组件
此时我点击了跳转A,传递的参数是1111,当我点击跳转A2传递的是222但是页面显示的还是1111home
看的了吧参数传递过来了但是页面并没有刷新,此时就是因为vue复用了同一个组件,生命
周期之创建了一次。
解决办法
第一种:使用beforeRouteUpdate钩子函数,vue官方解释的也很清楚,当一个组件复用时,传递的参数
发生变化就会触发这个钩子函数
beforeRouteUpdate(to,form,next){
this.id = to.query.id
next()
}
第二种:通过监听路由的变化
watch:{
$route(to){
this.id = to.query.id
}
第三种:通过计算属性
computed: {
comPath(){
return this.id = this.$route.query.id
}
更多推荐
已为社区贡献2条内容
所有评论(0)