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 相关文章推荐
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
Vue实现表格批量审核功能实例代码
May 28 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
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
php表单处理操作
2017/11/16 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
自考毕业自我鉴定范文
2013/10/27 职场文书
2014组织生活会方案
2014/05/19 职场文书
财务管理专业求职信
2014/06/11 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
公司财务部岗位职责
2015/04/14 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
党支部半年考察意见
2015/06/01 职场文书