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. [javascript] test() 方法进行正则验证

    test() 方法用于检测一个字符串是否匹配某个模式 最近遇到的某业务中进行发票抬头的正则验证如下: console.log(/^[a-zA-Z\u4e00-\u9fa5\s()()<>& ...

  2. PMP--1.7 项目治理

    治理凌驾于管理之上 组织治理用于影响项目治理. 组织治理需要组织根据组织文化.项目类型和组织需求裁剪治理框架,适用于当前组织. 其实组织治理的内容,在项目管理初期不需要详细了解,组织治理的内容都是高层 ...

  3. C#XML文件操作随笔

    以为公司一直没有电源屏厂家协议解析为DevVars相关的软件,手写费时费力还容易出错,用了2天时间做了一个.txt协议文件筛选加并解析成xml文件的工具,总结一下用到的几个知识点 1.LINQ 是一个 ...

  4. docker笔记(2)

    docker笔记(2) 常用命令和操作 1. 镜像操作 操作 命令 说明 检索 docker search 关键字 eg:docker search redis 我们经常去docker hub上检索镜 ...

  5. LeetCode 面试题 02.06. 回文链表

    题目链接:https://leetcode-cn.com/problems/palindrome-linked-list-lcci/ 编写一个函数,检查输入的链表是否是回文的. 示例 1: 输入: 1 ...

  6. [Python自学] Flask框架 (1) (Flask介绍、配置、Session、路由、请求和响应、Jinjia2模板语言、视图装饰器)

    oldboy:s9day114 参考博客:https://www.cnblogs.com/wupeiqi/articles/7552008.html 一.Flask简介 1.安装Flask pip i ...

  7. day 8 函数编程_byets

    定义 bytes类型是指一堆字节的集合,在python中以b开头的字符串都是bytes类型 b'\xe5\xb0\x8f\xe7\x8c\xbf\xe5\x9c\x88' #b开头的都代表是bytes ...

  8. Android8.0自定义广播接收不到问题

    https://blog.csdn.net/kongqwesd12/article/details/78998151

  9. SQL JOIN 的解析

    1.SQL语句结构 select  distinct  < select_list > from  < left_table > < join_type > joi ...

  10. [PAT] A1023 Have Fun with Numbers

    [题目大意] 给一个不超过20位的数字,如果将它乘以2得到的数仅仅是原来的数字重新排列得到的,那就输出Yes,下一行输出加倍后的数.如果不是,输出No,下一行输出加倍后的数. [思路] 20位过于庞大 ...