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跳转同一个组件,参数不同,页面接收值只接收一次的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
动态组件component是Vue中非常实用的一个功能,它可以根据条件动态切换不同的组件,在Vue3中使用方法和Vue2基本一致,在vue3使用component动态组件展示组件时,组件就是不展示显示空白,所以本文记录了Vue3动态组件component不生效问题解决方法,需要的朋友可以参考下2024-08-08
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
今天小编就为大家分享一篇vue.js 双层嵌套for遍历的方法详解, 类似php foreach()，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了八种Vue组件间通讯方式合集(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript，我们需要引入一个库vue-property-decorator，需要的小伙伴可续看下文具体介绍2021-09-09
近期,发现点击修改,element ui 的图片没有回显到框中,所以本文给大家介绍了Element plus实现图片手动上传与回显的过程,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了el-table实现搜索高亮展示并滚动到元素位置,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,
这篇文章主要给大家介绍了关于解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本的相关资料,这个报错是由于在系统上禁止运行脚本导致的,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue-cli3 打包优化之 splitchunks的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了vue实现动态进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论