router不重新加载数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了router不重新加载数据相关的知识,希望对你有一定的参考价值。
router不重新加载数据是路由是相同的原因,项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也显示已经改变,但页面并不会刷新,因为路由是相同的,vue就会认为你是同一个页面,从而复用已加载的页面,而不会重新加载,所以如果在created钩子中来区分状态明显是行不通的,可以通过watch监听事件来监听路由的变化。 参考技术A 如果路由器没有重新加载数据,可能是因为电源未通或者网络有问题。请检查电源是否已断开,检查网络连接是否正常,如果问题依然存在,则应该将路由器关闭并重新启动。 参考技术B 第一种1-demo.vue 在当前需要刷新的页面
2-用这个路由对象去push
3-如果要获取路由传
4-但是!使用router-link进行的路由跳转,保持不变跟原来一样
第二种 该方法与我的类似,都是监听路由,只是我的监听路由,是当路由地址发生变化时,执行再跳转一下当前页面以此代替手动刷新
Vue刷新页面重新加载
Vue刷新页面重新加载
问题描述
在加载同一路由页面的时候,vue的页面默认是不刷新的,需要重新加载数据
解决方案
- 修改App.vue
在路由视图上添加一个变量isRouterAlive
判断显示实现重新加载
<template>
<!-- <router-view/> -->
<router-view v-if="isRouterAlive"/>
</template>
<script>
/*
这个脚本主要是用来刷新页面的
*/
export default {
name: 'App',
provide (){
return {
reload:this.reload
}
},
data(){
return {
isRouterAlive:true
}
},
methods:{
reload (){
this.isRouterAlive = false
this.$nextTick(function(){
this.isRouterAlive = true
})
}
},
components:{
}
}
</script>
-
在需要刷新的页面修改代码
主要是添加
inject: ['reload']
然后在需要刷新的地方调用this.reload()
需要注意的地方是当心死循环。
<script>
import request from "@/utils/request.js";
export default {
name:'RightPane',
inject: ['reload'],
data(){
return {
newest_datas: {},
};
},
methods:{
// 显示明细
showDetail(val){
//this.$router.push 传参
this.$router.push({path:'/showDetail',query:{id:val}});
this.reload()
}
},
created(){
//加载数据,显示最新的10条数据
request.get('/information?currentPage=1&pageSize=10')
.then((res) => {
this.newest_datas = res.data.data.records
}).catch((err) => {
this.$message({type: "error",message: "加载数据出错:"+err, })
});
}
}
</script>
以上是关于router不重新加载数据的主要内容,如果未能解决你的问题,请参考以下文章