vue watch route params change

    watch: {
'$route.params.menuKey' (val, oldVal) {
console.log('new route ', val);
// this.currentTab = val;
},
},
watch: {
'$route.params.search': {
handler: function(search) {
console.log(search)
},
deep: true,
immediate: true,
}
}
watch:{
'$route' (to, from){
// Put your logic here...
}
},
this.$forceUpdate()

vm.$forceUpdate()
vm.$nextTick( [callback] )

https://vuejs.org/v2/api/#vm-forceUpdate

https://vuejs.org/v2/api/#vm-nextTick

refs

https://stackoverflow.com/questions/50981059/watch-route-object-on-vue-js/50981093

https://router.vuejs.org/guide/essentials/dynamic-matching.html

https://forum.vuejs.org/t/rerendering-component-on-route-param-change-recalling-created-hooks/9536



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


vue watch route params change的更多相关文章

  1. vue vue-route 传参 $route.params

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. vue之this.$route.params和this.$route.query的区别

    1.this.$route.query的使用 A.传参数: this.$router.push({          path: '/monitor',          query:{       ...

  3. vue嵌套路由--params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...

  4. Vue Router的params和query传参的使用和区别

    vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...

  5. vue路由传值params和query的区别

    vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...

  6. 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数

    配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...

  7. vue & this.$route & this.$router

    vue & this.\(route & this.\)router const User = { template: '<div>User</div>' } ...

  8. vue router & query params

    vue router & query params vue router get params from url https://zzk.cnblogs.com/my/s/blogpost-p ...

  9. vue & @on-change !== on-change @on-change === @change

    vue & @on-change !== on-change @on-change === @change https://jsfiddle.net/Lasx1fod/ i-switch ht ...

随机推荐

  1. jQuery mock.js模拟的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. (Oracle)预定义异常

    预定义异常: 为了 Oracle 开发和维护的方便,在 Oracle 异常中,为常见的异常码定义了对应的异常名称,称为预定义异常,常见的预定义异常有: 异常名称 异常码 描述 DUP_VAL_ON_I ...

  3. (Sql Server)存储过程(转载)

    SQL Server 存储过程 Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这 ...

  4. C++ Primer Plus读书笔记(十)对象和类

    1.类 不废话,上定义 class ClassName { public: xxx; private: xxx; protected: xxx; } private部分数据只能通过public 提供的 ...

  5. Python中单引号,双引号,三引号的区别

    Python中的字符串一般用单引号('A'),双引号("A")和三引号('''A''')或者("""A""") 1.单引 ...

  6. LOJ10078

    CQOI 2005 重庆城里有 n 个车站,m 条双向公路连接其中的某些车站.每两个车站最多用一条公路连接,从任何一个车站出发都可以经过一条或者多条公路到达其他车站,但不同的路径需要花费的时间可能不同 ...

  7. 客户端,Scala:Spark查询Phoenix

    客户端,Scala:Spark查询Phoenix 1.pom.xml 2.配置文件 2.1config.properties 2.2MyConfig 3.entity实体(与phoenix中的tabl ...

  8. 希尔伯特曲线python3实现

    需要OpenGL库:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyopengl #coding:utf-8 from OpenGL.GL import * ...

  9. C语言实现2048小游戏

    目录 2048 一.设计思路 1.游戏规则 2.思路 二.代码实现 1.存储结构 2.初始化游戏数据 3.向左合并 4.其他方向合并 5.产生新的方块 6.源代码 7.实例演示 三.问题 2048 一 ...

  10. codeblocks输出中文乱码解决办法

    在使用codeblocks进行编程的时候我发现控制台输出会出现中文乱码,就像这样: 所以很快我就问了老师,解决步骤如下: 一:如果源码是用codeblock编写的,打开Setting->Edit ...