vue 刷新当前页面(provideinject 组合)

1.location. reload() this.$router.go(0)

刷新的时候会重新加载，有一个空白闪烁过程。

2.provide / inject 组合

通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行；

示例：

app.vue

<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> import axios from "axios"; export default { name: "App", provide() { return { reload: this.reload }; }, data() { return { isRouterAlive: true }; }, mounted() { }, methods: { reload() { this.isRouterAlive = false; this.$nextTick(function() { this.isRouterAlive = true; }); } } }

需要重新加载的页面：

注：

provide / inject

2.2.0 新增

类型：

provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }

详细：

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是：

一个字符串数组，或一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象，该对象的： from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)default property 是降级情况下使用的 value

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。