vue中监听路由参数的变化

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。

mounted: () =>{
      this.id = this.$route.query.id;
      this.getdetail()
}

getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数。

可以添加路由监听:

watch: {
    $route: {
          handler() {
              this.id = this.$route.query.id;
              this.getDetail();
              //深度监听,同时也可监听到param参数变化
        },
        deep: true,
    }
  }     

原文地址:https://www.cnblogs.com/gxp69/p/11994481.html

时间: 2024-11-08 15:29:23

vue中监听路由参数的变化的相关文章

vue中监听window.resize的变化

我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也真的让人有种想要发狂的感觉.但是还好,最后在不断的查资料和尝试当中.实现了想要的效果,仅供参考: 首先我这里实现的效果是切换echart图形,然后在window.resize过程中想要实现自适应窗口大小的变化. 这里的两个button分别是控制两个路由切换,也就是两个echart图形(柱状图和饼图)

vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

1 // 开始这样写,不执行 2 window.onresize = function() { 3 console.log('窗口发生变化') 4 } 5 6 7 // 改成window监听事件 8 window.addEventListener('resize', function() { 9 console.log('窗口发生变化') 10 }) onresize的定义方式 一.直接在html中定义 如<body onresize="doResize()"/> 二.直接

Vue中监听窗口关闭事件并在窗口关闭前发送请求

Vue中监听窗口关闭事件并在窗口关闭前发送请求,代码如下: mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) }, destroyed() { window.removeEventListener('beforeunload', e => thi

vue中监听vuex state变化,亲测可用

import {mapGetters} from 'vuex' computed: { ...mapGetters([ 'showChip' ]) }, watch: { showChip(newVal) { this.chipInState = newVal } } //试了几种方案,只有这个起效果了,记录一下. 原文地址:https://www.cnblogs.com/changlun/p/12333718.html

react-router搭配react-redux无法监听路由变化的问题

在react中,要将react组件连接到redux中,通常会这样包装组件 class Home extends Component { } function select(state) { return { logBox:state.logBox } } export default connect(select)(Home) 但是当搭配react-router的时候,在进行路由跳转的时候,组件不会重新render.这个时候看react-redux的connect方法的说明: connect([

Angular 监听路由变化

var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { co

mint ui的tabBar监听路由变化实现tabBar切换

说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应的tabBar高亮显示,而mint ui就不能,要加点代码实现了. mint ui tabBar标签栏 //页面 和 数据 <template> <div id="main"> <mt-tabbar v-model="selected"&g

Vue--watch控制监听路由地址-组件的变化----&#39;$route.path&#39;: function (newVal, oldVal)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

Angular 监听路由变化事件

摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... }) app.run(['$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager', function($rootScope, $location, $co