vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
更新时间：2019年11月05日 15:07:58 作者：做梦i
今天小编就为大家分享一篇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也不会执行，也就是说，不会执行第二次赋值。
那我们应该怎么获取值呢？
这里有一个方法：
goods.vue
beforeRouteUpdate(to,from,next){
this.stri=to.query.type;
next();
}
beforeRouteUpdate的作用就是监听在当前路由改变，但是该组件被复用时调用
这就是我们所需要的东西了。路由的地址变化了，组件也被复用了。
同样的我能还可以使用另一种监听路由变化的方法：
watch:{
'$route'(to,from){
this.stri=to.query.type
}
},
这个方法，和上面的beforeRouteUpdate起到一样的效果。
如果你遇到的问题，和我所遇到的一样，那么恭喜你，你也解决了这个问题。
以上这篇vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vite+vue3搭建的工程热更新失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
这篇文章主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue cli webpack中使用sass的方法,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue父组件监听子组件数据更新方式(hook)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue组件传值(高级)、属性传值、反向传值、跨级传值实例详解
父组件通过属性传值给子组件，父组件修改数据后会刷新页面并重新传值给子组件，子组件可以修改父组件传的值并刷新自己的页面 但是并不会修改父组件中的值，这篇文章主要介绍了vue组件传值（高级）、属性传值、反向传值、跨级传值,需要的朋友可以参考下2022-09-09
这篇文章介绍了vue使用脚手架vue-cli创建并引入自定义组件的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
本文主要介绍了Vue实现动态路由导航的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了vue中的keep-alive的相关资料，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了关于路由重定向redirect的基本使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue 中的 render 函数作用，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
最新评论