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冲刺-总结

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺 团队名称:葫芦娃队 作业目标:总结项目冲刺内容 githup地址:https://https://github.com/Baka ...

  2. python应用-表格式输出一组数据

    def main(): names=['关羽','张飞','赵云','马超','貂蝉'] subjects=['语文','数学','Python'] table=[[0 for _ in range( ...

  3. CalcIntegerLength

    private static int CalcIntegerLength(int iLen) { //String str_iLen = Convert.ToString(iLen); int str ...

  4. What is a Servlet?

    Servlet 工作原理解析 https://www.ibm.com/developerworks/cn/java/j-lo-servlet/index.html 你可以理解为,Spring MVC是 ...

  5. uni验证码60秒倒计时

    其实要实现这个功能原理非常简单,就是setInterval+setTimeout+clearInterval结合使用,首先在data里定义一个变量second,初始值为60,然后在setInterva ...

  6. [React] Write a generic React Suspense Resource factory

    Using Suspense within our component isn't exactly ergonomic. Let's put all that logic into a reusabl ...

  7. cc2530单片机的第一次实验,流水灯

    第一个实验:控制流水灯 P1_0,P1_1,P0_4都连接在发光二极管的负极,所以,当这三个引脚为低电平,也就是0的时候,相应的发光二极管才会亮. 其实这里可以稍微的关注一下寄存器的地址,然后,编程的 ...

  8. ent facebook 开源的golang orm 框架

    ent 是facebook 开源的golang orm 框架,简单强大,具有提下特性 schema 即代码 方便的图遍历 静态类型以及显示api 多种存储引擎支持(当前是mysql,sqlite,以及 ...

  9. 【题解】洛谷 P1080 国王游戏

    目录 题目 思路 \(Code\) 题目 P1080 国王游戏 思路 贪心+高精度.按\(a \times b\)从小到大排序就可以了. \(Code\) #include<bits/stdc+ ...

  10. centos7 安装 bugfree3

    . 安装apache yum install httpd . 安装mysql wget -i -c http://dev.mysql.com/get/mysql57-community-release ...