1.监听路由处理

watch: {
$route(to, from) {
// 逻辑
// 重新调用数据接口
}
},

2.beforeRouteUpdate导航守卫 路由更新时触发

 beforeRouteUpdate (to, from, next) {
// 逻辑
this.$route.query.xx = to.params.xx; next() // 一定要有next
},

3.只需要在入口文件设置监听事件即可

<div id="app" :key="Key">

</div>

data() {
return {
Key: ''
};
},
watch: {
$route: function(newUrl, oldUrl) {
this.Key = new Date().getTime();
}
}

VUE 同一页面路由参数变化,视图不刷新的解决方案的更多相关文章

  1. 【问题】VUE 同一页面路由参数变化,数据不刷新

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

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

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

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

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

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

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

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

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

  6. vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为

    vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...

  7. Vue自定义页面路由

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

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

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

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

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

随机推荐

  1. 项目Beta冲刺(团队)——博客集合

    项目Beta冲刺(团队)--博客集合 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:集中记录所有Beta敏捷冲刺日志的集 ...

  2. Photon介绍与安装

    Photon光子引擎是一款实时的Socket服务器和开发框架,快速.使用方便.容易扩展. 服务端架构在windows系统平台上,采用C#语言编写. 客户端SDK提供了多种平台的开发API,包括DotN ...

  3. 学习:费马小定理 & 欧拉定理

    费马小定理 描述 若\(p\)为素数,\(a\in Z\),则有\(a^p\equiv a\pmod p\).如果\(p\nmid a\),则有\(a^{p-1}\equiv 1\pmod p\). ...

  4. 20182310 第二周&第三周学习总结

    20182310 2019-2020-1 <数据结构与面向对象程序设计>第2周&第3周学习总结 教材学习内容总结 1.首先是String类定义的字符串,然后是print和print ...

  5. 第一个python&selenium自动化测试实战项目

    说明:本项目采用流程控制思想,未引用unittest&pytest等单元测试框架 一.项目介绍 目的 测试某官方网站登录功能模块可以正常使用 用例 1.输入格式正确的用户名和正确的密码,验证是 ...

  6. 代码的结合性:继承 扩展 组合 变换--swift暗含的四根主线

    类型继承: 类型扩展: 类型组合: 类型变换:

  7. Linux 中 Buffer/Cache内存占用过高解决方法

    在Linux系统中,我们经常用free命令来查看系统内存的使用状态.在一个RHEL6的系统上,free命令的显示内容大概是这样一个状态: 这里的默认显示单位是kb,我的服务器是128G内存,所以数字显 ...

  8. GIT与项目

    创建GitHub账号 本地Git仓库和GitHub仓库之间的传输是通过SSH加密的 step1:创建项目的SSH Key ssh-keygen -t rsa -C "your email@e ...

  9. DIP大作业---图像分割

    数字图像处理课程的大作业,要求如下: 图像分割就是把图像分成若干个特定的.具有独特性质的区域并提出感兴趣目标的技术和过程.它是由图像处理到图像分析的关键步骤.现有的图像分割方法主要分以下几类:基于阈值 ...

  10. win10系统2分钟睡眠

    https://blog.csdn.net/widenstage/article/details/78982722 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSe ...