作为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)
}
}
}
上面这个方法 若果被多次调用 就会出问题 那么只能
在created() 里头去掉方法 然后把值直接赋给需要的地方 不要在监听里头写。
最好写成下面的形式
watch:{
$route:{
immediate:true,
handler(newval,oldval){
this.router = newval //新的路由
}
}
}