vue 同一个页面第二次跳转路由不刷新问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 同一个页面第二次跳转路由不刷新问题相关的知识,希望对你有一定的参考价值。
参考技术A vue在第二次跳转同一路由跳转数据不更新,使用router-view时,如果在相同路由之间跳转,默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。vue 同一路由跳转不走生命周期,导致数据不更新。
使用watch 监听路由变化。手动更新数据。
使用 <router-view :key="$route.fullPath"/>
把你mounted() 里面执行的办法在 activated() 里面在执行一遍,完美解决。
router二次跳转不刷新的问题
router路由页面二次跳转不刷新数据的问题,已经带参了二次请求的时候
本来打算在count页面带参跳转到device
count页面按钮 <el-button size="mini" type="text" icon="el-icon-tickets" @click="handleDetail(scope.row)" v-hasPermi="['lock:device:detail']">
主要是一个@click方法
/** 查看详情 */
handleDetail(row) {
let sn = row.sn
this.$router.push(
{path:'/device/device/',
query:{sn: sn}
},
);
},
watch: {
'$route' (to, from) {
this.$router.go(0);
}
},
这个watch是为了防止第二次页面跳转的时候不刷新,已经带参数了却刷新,如果你手动F5刷新页面再跳转又会刷新了,
使用watch避免二次跳转不刷新问题
接受跳转的页面写
created方法下写
watch: {
'$route' (to, from) {
this.$router.go(0);
}
},
methods方法下写
// 取到路由带过来的参数
const routerParams = this.$route.query.sn
// 将数据放在当前组件的数据内
this.queryParams.sn = routerParams;
this.handleQuery();
this.reset();
this.resetQuery();
this.getList();
以上是关于vue 同一个页面第二次跳转路由不刷新问题的主要内容,如果未能解决你的问题,请参考以下文章