VUE 路由参数改变重新刷新数据

App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表。

修改 index.js 文件

首先在路由文件 index.js 文件中添加几行代码:

const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}

这几行代码保证我们在当前路由页面下再次跳转到这个路由不会出错。

修改 App.vue 文件

添加点击查询按钮,进行页面跳转并搜索

	 this.$router.push({
name:'list',
query: {id:this.selectMsg }
})

在 list.vue 文件中使用 watch监听器

使用watch监听器监听路由参数变化。

// 监听器监听路由参数变化
watch:{
'$route':'getId'
},

上边的意思是当监听到 $route 对象变化后就监听到,调用getId方法。

下面是 getId 方法在下面:

	 // 监听路由参数变化
getId(){
this.getCarouselList(this.$route.query.id)
},

getCarouselList 是一个http请求方法。就是这样。

VUE 路由参数改变重新刷新数据的更多相关文章

  1. vue 缓存的keepalive页面刷新数据

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...

  2. Vue路由参数

    vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...

  3. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  4. Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据

    准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...

  5. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  6. vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  7. vue路由参数的获取、添加和替换

    获取路由参数 getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&am ...

  8. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  9. vue 路由参数变化,页面不更新的问题

    监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为  /p ...

随机推荐

  1. idea如何做到多模块开发项目 收藏整理

    idea如何做到多模块开发项目 <packaging>pom</packaging>是什么意思? idea 快捷键汇总

  2. 抽取vs2010安装包中vc++ runtime

    写于2015-3-21 16:59 由qq空间转过来,格式有点乱     之前遇到一个问题,c++\cli的程序部署在服务器上面,程序运行后没有反应就退出了,日志管理器中记录两个错误信息分别如下:   ...

  3. #《Essential C++》读书笔记# 第二章 面向过程的编程风格

    基础知识 函数必须先被声明,然后才能被调用(被使用).函数的声明让编译器得以检查后续出现的使用方式是否正确--是否有足够的参数.参数类型是否正确,等等.函数声明不必提供函数体,但必须指明返回类型.函数 ...

  4. findContours()函数

    函数原型 findContours(InputOutputArray image, OutputArrayOfArrays contours, OutputArray hierarchy, int m ...

  5. Elasticsearch配置集群环境

    环境选择:            1.方案一:准备三台机器   每一台机器一个节点            2.方案二:准备一台机器   启动三个节点,用端口号区分即可            3.ES启 ...

  6. Notability

    Notability 上课记笔记.听网课→Notability 有录音功能, 在原来笔记中新添加空白行(选中之后下移) Notability常用的功能总结 1.纸张有颜色2.荧光笔会盖住文字3.套索工 ...

  7. (办公)记事本_linux压缩命令

    参考谷粒学院的linux视频教程:http://www.gulixueyuan.com/course/300/task/7091/show 在Linux中可以识别的常见的压缩格式有十几种,比如&quo ...

  8. opencv —— addWeighted 图像叠加(计算数组加权和)

    计算数组加权和:addWeighted 可实现两个大小.类型均相同的数组(一般为 Mat 类型)按照设定权重叠加在一起. void addWeighted(InputArray src1,double ...

  9. 【58】目标检测之YOLO 算法

    YOLO 算法(Putting it together: YOLO algorithm) 你们已经学到对象检测算法的大部分组件了,在这个笔记里,我们会把所有组件组装在一起构成YOLO对象检测算法.   ...

  10. Count the Colors ZOJ - 1610 区间颜色覆盖

    #include<stdio.h> #include<iostream> #include<string.h> #include<algorithm> ...