依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个页面并不会运行created组件生命周期,导致数据还是第一次进入的数据。

解决方法:watch监听路由是否变化

watch: {
'$route' (to, from) { //监听路由是否变化
if(this.$route.params.id){//判断id是否有值
//调数据
}
}
}

【问题】VUE 同一页面路由参数变化,数据不刷新的更多相关文章

  1. VUE 同一页面路由参数变化,视图不刷新的解决方案

    1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...

  2. vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)

    watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...

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

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

  4. vue中监听路由参数变化

    今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...

  5. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...

  6. Vue自定义页面路由

    错误1:webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:1 ...

  7. Vue下URL地址栏参数改变却不能刷新界面

    在完成毕业设计(基于Vue的信息资讯展示与管理平台)的过程中,处理如下图所示的 点击左侧栏目列表跳转到对应文章列表 的问题时,初次点击可以跳转到对应的页面,但是当第二次点击时,虽然地址栏的参数改变了, ...

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

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

  9. vue 同页面不同参数

    项目:详情页中有一个模块为更多产品,点击也是跳转到详情页,也就是相同路由,不同参数. 试过的方法:用this.$router.push,并没有任何反应,没有任何请求,页面也未重新加载,用this.$e ...

随机推荐

  1. CentOS 配置防火墙操作实例(启、停、开、闭port)

    CentOS 配置防火墙操作实例(启.停.开.闭port): 注:防火墙的基本操作命令: 查询防火墙状态: [root@localhost ~]# service   iptables status& ...

  2. poj--1488--TEX Quotes(水题)

    TEX Quotes Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9672   Accepted: 5071 Descri ...

  3. beego简单的验证码实现以及验证

    /** * 程序 */package controllers import (    "github.com/astaxie/beego"    "github.com/ ...

  4. 处理某客户p570硬盘故障所思

    p570,硬盘故障. 机器有两个vg,rootvg和datavg,rootvg未做镜像,datavg已做镜像.系统errpt和HMC报硬盘有问题,查看错误代码可能是硬盘有坏道(坏块),在尽量保全用户数 ...

  5. 错误:created a ThreadLocal with key of type ……but failed to remove it when the web application was stopped. This is very likely to create a memory leak.

    tomcat reload显示错误:SEVERE: The web application [/Interceptor] created a ThreadLocal with key of type ...

  6. OpenCascade Sweep Algorithm

    OpenCascade Sweep Algorithm eryar@163.com Abstract. Sweeps are the objects you obtain by sweeping a ...

  7. SQL查询表中的用那些索引

    方法1. 使用系统表   -- 查询一个表中的索引及索引列 USE AdventureWorks2008 GO SELECT indexname = a.name , tablename = c. n ...

  8. 计算器-- 利用re模块 利用函数封装 第二版

    import re remove_parentheses = re.compile('\([^()]+\)') def Remove_Parentheses(obj, s): # 找到内层的括号并且返 ...

  9. Stacked Autoencoders

    转自:http://www.cnblogs.com/tornadomeet/archive/2013/03/25/2980357.html 如果使用多层神经网络的话,那么将可以得到对输入更复杂的函数表 ...

  10. deep-in-es6(三)

    模板字符串:反撇号(`)包起来的内容. eg: var str = `assassin`; console.log(str); 模板占位符:${};可达到数据的渲染,在占位符中可以是表达式,运算符,函 ...