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. 缺jar包异常:java.lang.NoClassDefFoundError: org/springframework/core/convert/support/PropertyTypeDescriptor

    严重: StandardWrapper.Throwable java.lang.NoClassDefFoundError: org/springframework/core/convert/suppo ...

  2. Spring Cloud 组件 —— gateway

    Spring Cloud 网关主要有三大模块:route.predicates.filters 其中 filter 最为关键,是功能增强的核心组件. 列举出一些功能组件: 5.6 CircuitBre ...

  3. w5500驱动使用方法调试笔记

    1.w5500有两种方式可以运行的,server端一般用中断的方式,效率比较高,client使用查询的模式,本身自带2k的发送缓存和2k的接收缓存.2.查询模式:有数据的时候,查询模式可以每隔一段时间 ...

  4. trait Monad:函数式编程类型系统本博客搜索关键字--类型升降

    trait Monad:函数式编程类型系统本博客搜索关键字--类型升降

  5. Gym100676 H. Capital City

    感觉题目都已经快把正解给说出来了...strongly connected的两个点的消耗为0,其实就是同一个边双连通分量里面的点消耗为0.然后缩一下点,再树形DP一下就完了.第一次写边双,但感觉挺简单 ...

  6. ID 迭代加深搜索 模板 埃及分数

    #include <bits/stdc++.h> using namespace std; #define LL long long int Maxd; LL Ans[10], now[1 ...

  7. (尚029)Vue_案例_交互footer组件功能

    需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...

  8. Numpy | 10 广播(Broadcast)

    广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式, 对数组的算术运算通常在相应的元素上进行. 下面的图片展示了数组 b 如何通过广播来与数组 a 兼容. 4x ...

  9. 为知笔记docker 版本运行

    最近为知提供了服务端的docker 运行,因为是全家桶,镜像偏大,但是使用还很不错,对于少于5人的可以免费使用 docker-compose 文件 version: "3" ser ...

  10. Visual Studio调试窗口一闪而过的解决方法

    小编在用vs写程序时,经常碰到调试窗口一闪而过的情况,以至于根本无法查看程序输出结果. 为了解决这个问题,可以在程序的末尾加上一个系统调用语句: int main(){ printf("我不 ...