前言
当跳转跳转同一个路由地址时,此时这个组件会被复用。在这种情况下,传递过来的参数不会发生变化,因为组件复用了不会再重新创建,遇到这种问题的同学不要慌解决办法斜体样式还是有的!
问题
当前我有一个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
         }
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐