从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍vue.js监听路由变化的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联专业为企业提供图木舒克网站建设、图木舒克做网站、图木舒克网站设计、图木舒克网站制作等企业网站建设、网页设计与制作、图木舒克企业网站模板建站服务,十余年图木舒克做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
vue.js监听路由变化的方法:1、通过watch实现,代码为【watch:{$route(to,from){console.log(to.path);}】;2、key是用来阻止“复用”的,代码为【
vue.js监听路由变化的方法:
方法一:通过 watch
// 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } },
或
// 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } },
或
// 监听,当路由发生变化的时候执行 watch: { '$route':'getPath' }, methods: { getPath(){ console.log(this.$route.path); } }
方法二:key是用来阻止“复用”的
Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)
computed: { key() { return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date() } }
使用computed属性和Date()
可以保证每一次的key都是不同的,这样就可以如愿刷新数据了。
方法三:通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
以上是“vue.js监听路由变化的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图