vue跳转同一个组件参数不同,页面接收值只接收一次怎么解决

本文小编为大家详细介绍“vue跳转同一个组件参数不同,页面接收值只接收一次怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue跳转同一个组件参数不同,页面接收值只接收一次怎么解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联，是成都地区的互联网解决方案提供商，用心服务为企业提供网站建设、成都App定制开发、重庆小程序开发、系统按需求定制设计和微信代运营服务。经过数十多年的沉淀与积累，沉淀的是技术和服务，让客户少走弯路，踏实做事，诚实做人，用情服务，致力做一个负责任、受尊敬的企业。对客户负责，就是对自己负责，对企业负责。

例如：

app.vue

  <ul>
      <li class="navList" v-for="index in goods" :key="index.name">
       <router-link :to="{path:index.link,query:{type:index.name}}" >
        {{index.name}}
       </router-link>
      </li>
   </ul>

app…vue中的data数据：

goods:[
  {name:'女装',link:'goods'},
  {name:'男装',link:'goods'},
  ]

在goods.vue中接受数据

mounted(){
  this.stri=this.$route.query.type;
 }

当我循环输出这些链接，每个链接的地址都是一样的。参数不一样，当我们点击我们的按钮时

我们只会看到导航栏中的参数在变化，然而我们页面中的数并没有变化。这是为什么呢？

相信很多朋友也已经知道了，这是因为跳转同一个组件，这个组件在第一次，会执行组件的生命周期中的步骤，但是第二次再跳转该组件的时候，组件会被重用，所以不会再执行生命周期中的某些过程，同样mount也不会执行，也就是说，不会执行第二次赋值。

那我们应该怎么获取值呢？

这里有一个方法：

goods.vue

beforeRouteUpdate(to,from,next){
  this.stri=to.query.type;
  next();
 }

beforeRouteUpdate的作用就是监听在当前路由改变，但是该组件被复用时调用

这就是我们所需要的东西了。路由的地址变化了，组件也被复用了。

同样的我能还可以使用另一种监听路由变化的方法：

 watch:{
  '$route'(to,from){
   this.stri=to.query.type
  }
 },

这个方法，和上面的beforeRouteUpdate起到一样的效果。

读到这里，这篇“vue跳转同一个组件参数不同,页面接收值只接收一次怎么解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

网页标题：vue跳转同一个组件参数不同,页面接收值只接收一次怎么解决
网页网址：https://www.cdcxhl.com/article10/gpjido.html

成都网站建设公司_创新互联，为您提供服务器托管、网站设计公司、网站设计、网站维护、移动网站建设、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联