Vue项目中强制刷新页面的方法

简介: Vue项目中强制刷新页面的方法

我们在动态切换组件的过程中,导航栏和底栏不动,动态切换中间区域的情况,在首页可以进行跳转任意组件,在组件与组件之间不能相互跳转,路由发生了变化,但是页面未改变,这时我们就需要强制刷新页面。

强制刷新页面的方式有三种:

①location.reload()

②this.$router.go(0)

   前面两种方法都有些简单粗暴,主要说一下第三种方法

③provide 配合 inject

首先我们需要在App.vue中修改

通过定义reload方法,控制router-view的显隐(生成和销毁)

然后在需要刷新页面的组件中注入依赖,注入时inject后面是上面的方法名称

最后直接调用reload方法就能实现页面的刷新

 

 

 

目录
相关文章
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
4 0
|
1天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
5 0
|
1天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
1天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
1天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
JavaScript Go
VUE 路由参数动态变化,刷新页面动态变化
VUE 路由参数动态变化,刷新页面路由参数动态变化,子组件获取路由参数 场景:响应路由参数变化,当使用路由参数时,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。
4116 0
|
2天前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
8 0
|
2天前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
7 0
|
2天前
|
JavaScript 前端开发 开发者
new Vue() 发生了什么
new Vue() 发生了什么
9 1
|
1天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式