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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
模拟select的代码
Oct 19 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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调用Google translate_tts api实现代码
2013/08/07 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
Python字符遍历的艺术
2008/09/06 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
python基本语法练习实例
2017/09/19 Python
python实现的生成word文档功能示例
2019/08/23 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
关于元旦的广播稿
2014/02/16 职场文书
政府信息公开实施方案
2014/05/09 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
在js中修改html body的样式
2021/11/11 Javascript
python通过新建环境安装tfx的问题
2022/05/20 Python