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. Nuxt 知识点

    脚手架工具 create-nuxt-app 创建项目: $ npx create-nuxt-app <项目名> 启动项目: To get started: cd nuxt_demo npm ...

  2. 获取对象State的方法

    一.通过Scaffold.of(context)可以获取父级最近的Scaffold Widget的State对象 二.通过GlobalKey来获取.步骤有两步: 给目标StatefulWidget添加 ...

  3. Excel——读取——导出目录

    /** * 导出Excel文件到具体的目录 * <一句话功能简述> * <功能详细描述> * @param fileName 导出的文件名 * @param sheetName ...

  4. 阿里云部署,ubuntu, 连接服务器 |更新源| 安装node |安装mysql

    1.连接服务器 xshell 新建连接 ssh root@1.1.1.1 2.更新源 apt-get update 3.安装node apt-get install -y curl curl -sL ...

  5. java内部类的本质

    连接与通信,作为桥接中间件存在. 内部类和主体类可以无障碍通信: 1.通过继承连接实现: 2.通过接口连接通信: 形式: 1.命名空间: 2.运行上下文: 其它: 信息隐藏是次要功能. 内部类 Jav ...

  6. Arduino通过串口监视器收发数据

    在串口监视器中发送数据,板子收到数据并打印出来. 不需要额外电路,但是板子必须连接电脑,Arduino IDE的串口监视器也需要被打开. 代码 /* 串口事件 当新的串口数据到来时,我们会将它添加到一 ...

  7. 第8章 动态SQL

    8.1动态SQL中的元素 8.2<if>元素 举例,在映射文件中: <select id="findCustomerByNameAndJobs" paramete ...

  8. NYOJ104-最大和-(前缀和)

    题意:给一个矩阵,每个元素有正有负,求最大矩阵和. 解题: (1)对原矩阵a用前缀和处理,处理变成矩阵sum,sum[i][j]表示从左上角为a[1][1]到右下角a[i][j]的全部元素和. 矩阵必 ...

  9. Ice Igloos Gym - 101480I (暴力技巧)

    Problem I: Ice Igloos \[ Time Limit: 10 s \quad Memory Limit: 512 MiB \] 题意 给出\(n\)个圆,给出每个圆的坐标\(x\). ...

  10. OpenCV实现"你的名字"滤镜

    这是一个比较有意思的demo,用到了播送融合,具体效果见下图: 文件结构如图所示 主程序代码 #include"stdafx.h" #include<opencv2/phot ...