vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法


Posted in Javascript onNovember 05, 2019

作为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;
 }

当我循环输出这些链接,每个链接的地址都是一样的。参数不一样,当我们点击我们的按钮时

vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法

我们只会看到导航栏中的参数在变化,然而我们页面中的数并没有变化。这是为什么呢?

相信很多朋友也已经知道了,这是因为跳转同一个组件,这个组件在第一次,会执行组件的生命周期中的步骤,但是第二次再跳转该组件的时候,组件会被重用,所以不会再执行生命周期中的某些过程,同样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跳转同一个组件,参数不同,页面接收值只接收一次的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 #Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 #Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 #Javascript
vue 实现路由跳转时更改页面title
Nov 05 #Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 #Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 #Javascript
node.js域名解析实现方法详解
Nov 05 #Javascript
You might like
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python与caffe改变通道顺序的方法
2018/08/04 Python
Python帮你识破双11的套路
2019/11/11 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
师德师风整改措施
2014/10/24 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
邹越演讲观后感
2015/06/15 职场文书
三八妇女节致辞
2015/07/31 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书