vue-router中关于组件复用页面不刷新的问题
2018-06-25 15:45
946 查看
业务描述:
当前页面是一个带参数的页面,如下:
![](https://oscimg.oschina.net/oscnet/99a715ad84e511254476f8368f6cf6128de.jpg)
页面下方有tab,点击其一个的跳转路由是:
![](https://oscimg.oschina.net/oscnet/c703c874feb3fd14213f6120736fc3f2842.jpg)
由此,发现问题,地址改变了,但是页面数据没有刷新。
查阅后,此情况属于组件复用的情况。
解决方法:
通过watch监听路由变化:
当前页面是一个带参数的页面,如下:
![](https://oscimg.oschina.net/oscnet/99a715ad84e511254476f8368f6cf6128de.jpg)
页面下方有tab,点击其一个的跳转路由是:
![](https://oscimg.oschina.net/oscnet/c703c874feb3fd14213f6120736fc3f2842.jpg)
由此,发现问题,地址改变了,但是页面数据没有刷新。
查阅后,此情况属于组件复用的情况。
解决方法:
通过watch监听路由变化:
watch: { '$route':function(to,from){ //在这个地方,重新调一遍进入页面的接口,比如:initData()?? },
相关文章推荐
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 当多个<router />使用同一个组件的时候,切换页面地址,页面不刷新的问题
- vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
- vue-router3.0版本中 router.push 不能刷新页面的问题
- vue-router 组件复用问题
- vue-router 组件复用问题详解
- vue.js中利用router进行跳转(子页面刷新404问题)
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- 关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题
- vue-router组件状态刷新消失的问题
- VUE-Router 同一页面第二次进入不刷新 问题以及几个解决方案。
- vue.js用vue-router路由传参时页面刷新后参数消失的问题
- vue-router 组件实例被复用问题
- Vuejs刷新页面子组件数据丢失问题的一点笔记
- 关于页面刷新的问题
- vue页面刷新或者后退参数丢失的问题
- 关于页面刷新的问题
- [Silverlight学习笔记]关于页面刷新的问题
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决