问题场景
- 项目开发中经常会遇到完成某些操作,刷新当前路由的需求。
- 问题:比如当我们使用动态组件时,从列表页进入编辑页面,没有牵扯到路由的变动,只是动态加载了不同的组件而已。那么当你编辑完成后,又想回到列表页,此时的列表页还是会停留在没有编辑前的状态。
- 期望效果:从列表页—>点击编辑—>进入编辑页(路由未改变)—>编辑完成—>刷新路由—>回到列表页—>展示编辑后的最新状态
解决办法
- 方法一:暴力解决-强制整个页面进行刷新
- 1.使用this.$router.go(0)函数,可以强制刷新当前页面
- 2.使用window.location.href或者window.location.reload(),强制刷新当前页面
- 注: 问题:以上两种处理都会是当前页面进行刷新,浏览器进行重新加载,出现页面闪烁和空白,极大的降低了用户体验。
- 方法二:优雅解决-借助vue的选项/组合 provide/inject (完美方案)
- 在app.vue中:
<template>
<div id="app">
<router-view v-if="isShow" />
<