网站建设 上海网站,整合营销推广,手机html编辑器,广州番禺楼盘Vue项目, 在实际工作中, 有些时候需要在 加载完某些数据之后对当前页面进行刷新, 以期 onMounted 等生命周期函数, 或者 数据重新加载. 总之是期望页面可以重新加载一次.
目前总结有三种途径可实现以上需求:
一, reload 直接刷新页面
window.location.reload();
$router.go(…Vue项目, 在实际工作中, 有些时候需要在 加载完某些数据之后对当前页面进行刷新, 以期 onMounted 等生命周期函数, 或者 数据重新加载. 总之是期望页面可以重新加载一次.
目前总结有三种途径可实现以上需求:
一, reload 直接刷新页面
window.location.reload();
$router.go(0);
相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时. 二, Vue Router 刷新当前页面
这个时候, 我们通过 $router.push 一个 refresh 路由的形式实现, 具体步骤如下:
步骤一:
新建一个 vue 文件, 文件中代码如下 ( 仅需要如下代码即可 ) :
templatediv/div
/templatescript
export default {beforeRouteEnter(to, from, next) {next(vm {vm.$router.replace(from.fullPath);});},setup() {}
}
/script
步骤二:
在你的路由文件中, 配置上述文件路由, 示例代码:
routes 数组中直接添加就行
{path: /refresh,name: refresh,component: () import(步骤一中创建文件的路径)}, 步骤三:
在目标位置, 使用 $router.push 上述路由即可, 示例代码:
$router.push({name: refresh,
});
以上三步, 结束! 三, 依赖注入方式实现 (即, provide/inject )
中心思想: 通过 v-if 来切换 router-view 的 显示/隐藏 从而实现重新加载组件的目的. 步骤如下.
步骤一:
修改 路由出口文件 ( 我测试时是在 App.vue 文件中加的 router-view / ), 通过 provide 提供一个刷新方法给后代组件.
注意: 我的Demo中没有测试路由嵌套的场景, 如果你是路由嵌套, 只想刷新嵌套的子路由, 那在这一步修改的就应该是 子路由 出口文件.
核心代码如下:
templatediv idapp!-- router-view/router-view --router-view v-ifisRefreshFlag/router-view/div
/template
script setup
import { ref, nextTick, provide } from vue;const isRefreshFlag ref(true)
function reloadPage() {isRefreshFlag.value falsenextTick(() {isRefreshFlag.value true})
}
provide(reloadPage, reloadPage)/scriptstyle
/style步骤二:
在目标组件的目标位置, 通过 inject 调用步骤一中的 reloadPage() 方法. 示例代码:
templatediv...button clickrefreshPage刷新页面/button/div
/template
script setup
import { inject } from vue;const reloadPage inject(reloadPage);function refreshPage() {reloadPage();
}/scriptstyle
/style以上两步, 结束!
以上三种方式, 亲测有效, 不过是 Vue 3 的代码风格, Vue 2 请自行转换.
欢迎留言扩充新方法!
