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. linux中文件处理命令

    目录 touch cat more less head tail touch 解释 命令名称:touch 命令所在路径:/bin/touch 执行权限:所有用户 功能描述:创建空文件 语法 touch ...

  2. Winfrom 减少控件重绘闪烁的方法

    Winform控件的双缓冲.控件的双缓冲属性是隐藏的,可以通过反射改变其属性值. lv.GetType().GetProperty("DoubleBuffered", Bindin ...

  3. Git 学习文档

    Study Document for Git Git 基础 Git 文件的三种状态: 已提交(committed).已修改(modified)和已暂存(staged). Git 工作目录的状态: 已跟 ...

  4. PR2018制作电子相册

    PR2018制作电子相册 新建序列,自定义的参数 重置工作区域的面板 调节声音的大小 剪辑区域小图标的功能介绍 1,点亮状态表示可以自动对齐吸附,方便拼接视频,2,图标表示视频接音频同时选中的,不点亮 ...

  5. Openshift部署流程介绍

    背景 Openshift是一个开源容器云平台,是一个基于主流的容器技术Docker和Kubernetes构建的云平台.Openshift底层以Docker作为容器引擎驱动,以Kubernetes 作为 ...

  6. git本地创建多个分支互不干扰

    git本地创建多个分支,互不干扰. 情景:在做某个需求a时,先需要修改紧急bug b:发版时发的是远程dev的代码.   方式一(推荐): (1)本地已有分支dev,写了需求a,先commit,即将工 ...

  7. h5 中修改input中 placeholder的颜色

    input::-webkit-input-placeholder{ color:blue; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ c ...

  8. MySQL概述及入门(一)

    MySql概述及入门(一) 什么是MySQL?    MySQL是当今主流的关系型数据库管理系统(记录是有行有列的数据库) , 可以与Oracle 和SQL Server 竞争 , 是最好RDBMS( ...

  9. mysql升级后出现Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'userinfo.

    安装了mysql5.7,用group by 查询时抛出如下异常: Expression #3 of SELECT list is not in GROUP BY clause and contains ...

  10. 吴裕雄--天生自然HADOOP操作实验学习笔记:hive安装

    实验目的 了解hive的原理和安装方式 学习使用MySQL数据库 使用hive进行基本操作 实验原理 1.Hive Hive是一个数据仓库技术,包括解释器.编译器.优化器,一次将一个sql语句装化为m ...