vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

引入:https://q.cnblogs.com/q/88214/

解决方法:

添加路由监听,路由改变时执行监听方法

methods:{
      fetchData(){
           console.log(‘路由发送变化doing...‘);
     }
  },
  created() {
        var self = this;
        self.fetchData();
  },
  watch:{
      ‘$route‘:‘fetchData‘
  },

  

原文地址:https://www.cnblogs.com/ilimengyang/p/9197797.html

时间: 2024-10-19 21:13:56

vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题的相关文章

vue 监听路由变化

方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,当路由发生变化的时候执行 watch: { '$route':'getPath

vue 监听data数据变化

当被监听的数据发生变化是,函数被执行 created() { this.$watch("Withdrawals", function (newValue, oldValue) { if(this.Withdrawals==false){ console.log("123") } }) } data(){ return{ Withdrawals:false } }

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 监听路由变化

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

初识vue 2.0(13):子组件使用watch监听父组件变化

子组件使用created或者mounted通常只能在组件初始化的时候,获取父组件传过来的props数据. 父组件props数据发生变化,子组件默认无法感知,因此需要手动实现子组件监听父组件变化的功能. 一般的值类型数据,可以直接使用watch监听: watch: { msg(newVal, oldVal){//对引用类型的值无效 console.info('value changed ', newVal) } } 引用类型,普通watch方法,无法监听到引用类型内部的变化. 解决此问题,可以在父

Angular 监听路由变化事件

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

实时监听输入框值变化的完美方案:oninput &amp; onpropertychange

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发.oninput 事件在主流浏览器的兼容情况如下: 从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接

Angularjs【监听数据的变化】和【如何修改数据】和【数据变化的传播】

一:监听数据的变化: 由于编译仅仅在启动引导时执行一次,这意味着我们的link函数只会被调用一次,那么, 如果数据变化,在界面上将不会有任何反馈,即界面和数据将变得不同步了. 这需要持续监听数据的变化. 好在AngularJS的scope对象可以使用$watch()方法,对建立在其上的变量的变化进行监听: watch(watchExpression,listener,[objectEquality]);watch方法要求传入三个参数: watchExpression - 要监听的表达式,比如:"