符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章主要介绍如何解决vue跳转同一个组件,参数不同,页面接收值只接收一次的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
网站制作、建网站找专业网站设计公司创新互联:定制网站、模板网站、仿站、小程序设计、软件开发、app软件定制开发等。做网站价格咨询创新互联:服务完善、10余年建站、值得信赖!网站制作电话:18980820575作为vue的初用者,你可能会像我一样遇到一个问题,对跳转组件是,我们想通过参数不同,调用不同的方法。
例如:
app.vue
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跳转同一个组件,参数不同,页面接收值只接收一次的问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。