1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们常常会应用路由传参, 还会传参到同一个路由, 然而会遇到批改了页面参数, 然而视图仍旧是之前的内容, 没有进行刷新, 上面我来分享一下解决办法。
4. 废话不多说, 间接上效果图:
起因剖析:
当 应用路由参数时, 例如从 /EnterpriseRegisterManagement/Enterpriserealname?state= 0 到 /EnterpriseRegisterManagement/Enterpriserealname?state=1, 原来的组件实例会被复用. 因为两个路由都渲染同个组件, 比起销毁再创立, 复用则显得更加高效。不过, 这也意味着组件的生命周期钩子不会再次被调用。复用组件时, 绝对路由参数的变动作出响应的话, 你能够简略的 watch(监听变动)$route 对象
5. 办法一:watch(监听变动) $route 对象:
watch: {
// 监听路由的变动 参数变动时更新公布订阅数据
$route(to, from) {// console.log(to);
// console.log(to.query.state);
// console.log(from);
console.log(from.query.state);
if (to.query.state) {this.$nextTick(() => {
this.state = to.query.state;
this.$forceUpdate();});
}
},
},
6. 办法二: 应用路由导航守卫:
beforeRouteUpdate (to, from, next) {
// 做一些想要做的解决...
next() // 肯定要有 next},
7. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。