Vue刷新页面有哪几种方式

在Vue项目中，刷新当前页除了 window.reload()，你还能想到什么办法？而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。

在某个详情页面的时候，我们经常需要通过路由中的详情 id 去获取内容，当我们在不同的详情页来回切换的时候，打开的页面是同一个，只是需要通过监听路由中的参数 id 的变化去重新请求详情接口。

如果这个详情页只需要一个接口还好，只需要通过 watch 去监听，里面做数据请求就好。

watch: {$route: {immediate: true,handler(to, from) {if (to.name === 'Detail') {let id = to.params.id// ...}}}}

那一旦这个页面有很多的接口，数据逻辑依赖很复杂的时候，这个时候再写一推的监听就很容易出现屎山代码。而且不好维护。

此时我们最希望的是进入每个详情页都刷新页面，也就是重新加载一遍组件。怎么去维护好一个全局刷新页面的方法去更新路由组件？

我们可以通过在 App.vue 里定义一个 reload 方法，通过provide 和 inject 来抛出和注入到其它页面使用。

而最终的重担落在这个 reload 方法身上，其实也简单，这个方法主要的做的事是控制一个变量的值来控制整个页面的路由组件移除和显示。

<template><div id="app"><router-view v-if="isRouterAlive" /></div>
</template>

export default {name: 'App',provide () {return {reload: this.reload}},data () {return {isRouterAlive: true}},methods: {reload () {this.isRouterAlive = falsethis.$nextTick(function () {this.isRouterAlive = true})}}
}

然后在其它页面注入该方法直接调用即可

export default {inject: ['reload'],data() {return {}},methods: {refresh() {this.reload()}}

实际项目中经常有各种曲线救国的思路可以帮我们解决很多问题。遇到问题一定要发散下思维，这个时候搞懂原理，再结合各种特性才能想到解决办法。

实践告诉我们文档中的方法很正，但是并不能解决所有的问题。往往需要根据文档中的多个特性相结合找到思路。

Vue刷新页面有哪几种方式相关推荐

vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
仿联想商城laravel实战---5、无刷新的增删改查（动态页面更新的三种方式（html））...
仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面用双向绑定插件比如vue ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
页面导航的两种方式 vue-router编程式导航编程式导航基本用法 <!DOCTYPE html> <html lang="en"><head&g ...
[译]使用Webpack提高Vue.js应用程序的4种方式
[译]使用Webpack提高Vue.js应用程序的4种方式原文地址 Webpack是开发Vue.js单页应用程序的重要工具.通过管理复杂的构建步骤,您可以更轻松地开发工作流程,并优化应用程序的大 ...
js刷新页面有哪几种方法
js刷新页面有哪几种方法一.总结一句话总结:location属性的reload方法即可:document.location.reload() 1.页面刷新有哪常见的8种方法? 1,history. ...
web网页页面布局的几种方式（转）
web网页页面布局的几种方式转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点就在于对网站尺寸的侧量单位不同 ...
Vue刷新页面重新加载
Vue刷新页面重新加载问题描述在加载同一路由页面的时候,vue的页面默认是不刷新的,需要重新加载数据解决方案修改App.vue 在路由视图上添加一个变量isRouterAlive判断显示实现重 ...

Vue刷新页面有哪几种方式

Vue刷新页面有哪几种方式相关推荐

最新文章

热门文章