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. 阿里巴巴Java开发手册(命名规范/常量定义篇)——查自己的漏-补自己的缺

    一.编程规约 (一) 命名规约 1. [强制]所有编程相关命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束. 反例: _name / __name / $Object / name_ / ...

  2. 解决关于VC++ 6.0打开文件时,程序停止的问题

    不少boys和girls安装VC++ 6.0英文版后,开始学习C++语言,但是使用软件的过程中,点击“打开”时,就会出现程序进程错误,崩溃的事儿,很是郁闷.最后直接一个对话框如下: 并且vc6.0直接 ...

  3. yugabyte 安装pg extention

    前段时间在学习yugabyte 发现yugabyte 是直接复用了pg server的源码,所以当时就觉得大部分pg extension 也是可用. 今天看到了官方文档中有关于如何安装的,发现还得多看 ...

  4. isopod dsl 框架管理kubernetes 配置

    isopod 是一个包含了丰富能力的dsl 框架我们可以不用编写yaml 文件来进行k8s 管理 说明 语法类似python,目前移植内置了一些不错的功能kube 方法 vault 集成,helm 集 ...

  5. Vue项目预渲染机制

    我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染( ...

  6. SSL证书创建与部署

    SSL证书简介SSL证书创建SSL证书部署-NginxSSL证书部署-ApacheSSL证书部署-Tomcat SSL简介以及发展SSL协议原理SSL应用场景 SSL简介以及发展传输层安全性协议,以及 ...

  7. 「HNOI2015」亚瑟王

    传送门 Description 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑. 他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚瑟 ...

  8. mark一下咕掉的题目

    蒟蒻才普及组呀~ 大佬别D我 等集中补一下 CF980F:咋说捏,我觉得要联赛了做这题有点浪费时间,等想颓废了再来写写叭qwq 215E/279D/288E/331C3/431D/433E/750G/ ...

  9. 《jmeter接口自动化与性能实战-飞天小子.pdf》

    Jmeter作为开源测试工具,以其轻便,功能齐全的优点,正越来越受到企业的重视.作为纯java的工具,它的扩展性无比强大,既可以做功能测试,也可以做性能测试:既支持接口层面的测试,也支持webdriv ...

  10. docker swarm和compose 的使用(阿里)

    基本的docker使用参考:Docker 入门 到部署Web 程序- (阿里面试常用的docker命令和优点) 昨天去阿里面试 问我如果给你5台服务器 如何部署docker,我说一个个拷贝,面试官听了 ...