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. codewars--js--Convert all the cases!

    问题描述: In this kata, you will make a function that converts between camelCase, snake_case, and kebab- ...

  2. Windows CMD 输出文本到文件,不加换行符

    >test.txt set /p="Hello" <nul >>test.txt set /p=" world!" <nul 正文 ...

  3. rpm 程序包管理介绍

    API:application program interface ABI:application binary interface linux系统的ABI文件是ELF格式的 windows系统的AB ...

  4. spark基本概念整理

    app 基于spark的用户程序,包含了一个driver program和集群中多个executor driver和executor存在心跳机制确保存活3 --conf spark.executor. ...

  5. 将Markdown编辑器搬进您的博客-让我们更优雅的书写文章

    各位小伙伴们,冷月今天给大家发一波福利.我们都知道markdown编辑器非常的好用,是我们写作的好帮手.这样的一款好用的文章编辑器,我们怎么才能让自己的博客也支持呢,冷月今天来教大家如何将Markdo ...

  6. MySQL 8 在一台机器上运行多个MySQL实例

    可以为每个实例使用一个MySQL Server二进制程序,也可以为不同实例使用同一个MySQL Server二进制程序. 不管哪一种选择,部分参数可能需要不同配置,以避免多个实例之间的冲突. 可能需要 ...

  7. 自动驾驶定位算法-直方图滤波(Histogram Filter)定位

    1.直方图滤波(Histogram Filter)的算法思想 直方图滤波的算法思想在于:它把整个状态空间dom(x(t))切分为互不相交的部分\(b_1.b_2....,b_{n-1}\),使得: 然 ...

  8. JDK13.0.1安装与环境变量的配置(Win10平台为例)

    一.下载与安装 Oracle官网下载:https://www.oracle.com/technetwork/java/javase/downloads/index.html,点击右侧下载 接受并下载对 ...

  9. WIN10与ubuntu双系统安装教程

    按照网上博客的安装教程安装的Win10+Ubuntu16.04双系统安装了好几遍都不成功?启动Ubuntu左上一直有个光标在闪?如果你的电脑也是双硬盘(装Windows系统的固态硬盘+机械硬盘),在安 ...

  10. while语句的使用

    学习while语句的正确用法:题目:老师教学生,讲一次之后 问学生会不会,如果不会:就再讲一遍.如果会了就放学,但是如果连讲了十遍还是不会,那也要放学回家 namespace _44讲十遍会不会 { ...