在开发vue项目过程中，因为项目原因需要实现局部刷新操作 。就比如最常见的管理系统 。左边是菜单，右边一大块是路由区域 。因为如果使用window.location.x的方式的话会导致整个网页刷新 。造成数据跟状态的丢失、这并不是我们想要的 。因为毕竟这是个单页应用 。只是需要局部刷新而已 。既刷新路由区域 。
思路因为vue路由切换的时候数据都会重新刷新 。所以我们就利用这个
- 新建一个公共组件 。用于实现重定向跳转，进而实现刷新操作 。组件名称redirect.vue
// redirect.vue 组件就这么简单，就只有这么点内容 。目的只是用于重定向<script>export default {created() {const { params, query } = this.$routeconst { path } = paramsthis.$router.replace({ path: '/' + path, query })},}</script>// router.jsconst routes = [// 重定向，用于实现刷新操作{path: '/redirect/:path(.*)',component: () => import('../views/redirect.vue'),},{path: '/',name: 'login',meta: {title: '登录页' },component: () => import('../views/login.vue')}]以后我们需要刷新则只需要导航到/redirect下
- 需要刷新当前页面用法如下：
// 刷新当前页面refreshSelectedTag() {this.$nextTick(() => {this.$router.replace({path: '/redirect' + this.selectedTag.path,})})},注意：this.selectedTag.path是你需要刷新的路由第二种实现思路，在router-view使用v-if
- 在根组件中
- 在组件中使用
【vue项目，实现页面局部刷新。非window.location.方式】
推荐阅读
- Python实现接口请求及封装
- 轮椅混双冰壶在哪年成为比赛项目
- 字节跳动|8点1氪 | 字节跳动将大幅压缩22-23年招聘计划；元气森林将推出无糖可乐味新品，项目代号YYDS；董宇辉回应东方甄选拉黑罗敏
- 坐式排球哪年列入残奥会项目
- 八大环保创业项目 环保项目
- 奥运运动项目有哪些呢
- 羽毛球减肥快还是跑步
- 遗传算法的基本概念和实现 遗传算法
- Vue学习笔记 git和码云的使用
- 电池|马斯克在线推荐巨赚钱项目：就像印钞票一样