vue路由跳转到同一个地址，获取不同参数

作为vue的初用者，你可能会像我一样遇到一个问题，对跳转组件是，我们想通过参数不同，调用不同的方法。

例如：

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也不会执行，也就是说，不会执行第二次赋值。

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

这里有一个方法：

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

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

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

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

watch:{
 '$route'(to,from){
  this.stri=to.query.type
 }
},
watch:{
$route(){
if(this.$route.query.table){
	thia.str = this.$route.query.table;
	this.getlsit(this.str)
}
}
}

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

本文地址：https://blog.csdn.net/alo_ne/article/details/110950033