VUE 路由参数改变重新刷新数据
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 路由参数改变重新刷新数据的更多相关文章
- vue 缓存的keepalive页面刷新数据
用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...
- Vue路由参数
vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由参数的获取、添加和替换
获取路由参数 getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&am ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- vue 路由参数变化,页面不更新的问题
监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为 /p ...
随机推荐
- idea unable to import maven see logs for details
问题描述 环境IEAD,Maven3.6.2 2019-09-09 17:29:10,751 [ 839683] ERROR - #org.jetbrains.idea.maven - Intelli ...
- vue基于video.js实现视频播放暂停---切图网
切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...
- BUGFIX 09 - 记一次Java中String的split正则表达式匹配 - 引发`OutOfMemoryError: Java heap space`的oom异常 排查及解决 -Java根据指定分隔符分割字符串,忽略在引号里面的分隔符
问题简述 说白了,Java根据指定分隔符分割字符串,忽略在引号(单引号和双引号)里面的分隔符; oom压测的时候,正则匹配"(?=(?:[^\"]*\"[^\" ...
- linux cpp (接口与实现的分离)
以下是 .h 文件,是接口. 以下是函数的实现 以下是主函数 首先是以上两个文件编译,不用编译头文件 g++ -c gradeBook.cpp g++ -c gradeBook.main.cpp 之后 ...
- stm32f103vct6外扩sram芯片
STM32F103是一款高性价比.多功能的单片机,配备常用的32位单片机片外资源,基于ARM Cortex-M3的32位处理器芯片,片内具有256KB FLASH,48KB RAM ( 片上集成12B ...
- 使用SSM 或者 springboot +mybatis时,对数据库的认证信息(用户名,密码)进行加密。
通常情况下,为了提高安全性,我们需要对数据库的认证信息进行加密操作,然后在启动项目的时候,会自动解密来核对信息是否正确.下面介绍在SSM和springboot项目中分别是怎样实现的. 无论是使用SSM ...
- lvm实现服务器磁盘空间合并
1 LVM实现将2块磁盘总空间“合二为一”并挂载到同一目录 1.1 磁盘分区 首先查看磁盘信息,对未分区的磁盘进行分区处理(选择你要合并的盘,这里是对vdb.vdc). 如上图,可以看出有5 ...
- kvm虚拟化安装及虚拟机创建
1.开启虚拟化(VMware虚拟机为例),安装centos7操作系统. 2.查看CPU是否开启虚拟化 #zgrep "vmx" /proc/cpuinfo 3.配置yum源,通过 ...
- java遍历统计一个文件夹中所有文件单词出现次数
思路就是通过递归进行文件遍历,把所有文件夹中的非目录文件都遍历一遍,并判断其中读取到的字符串是不是单词,并对单词进行记录和计数,并在最后进行排序输出,下面是代码: package word; impo ...
- Error: cannot fetch last explain plan from PLAN_TABLE
最近遇到了错误"Error: cannot fetch last explain plan from PLAN_TABLE",于是稍微研究了一下哪些场景下碰到这种错误,具体参考下面 ...