vue 实现局部刷新功能

966 阅读1分钟

1. 刷新整个页面

const onRefreshClick = () => {
  // 刷新整个页面
  // router.go(0) 
  // location.reload()
  // 局部刷新
  router.replace({ path: `/redirect${route.path}` })
}

2.配置路由router

 {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        name: 'router-reset',
        component: () =>
          import(
            /* webpackChunkName: "router-reset" */ '@/views/router-reset/index'
          ),
        meta: {
          title: '临时跳转路由'
        }
      }
    ]
  }

临时路由页面

<template>
  <div class="">临时路由页面</div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const path = route.params.path.reduce((pur, cur) => {
  pur = pur + '/' + cur
  return pur
}, '')
router.push({ path })
</script>

<style lang="scss" scoped></style>

3.添加tag标签判断

 addTagsViewList(state, tag) {
      const isFind = state.tagsViewList.find((item) => {
        return item.path === tag.path || tag.path.includes('/redirect/')
      })
      // 处理重复
      if (!isFind) {
        state.tagsViewList.push(tag)
        setItem(TAGS_VIEW, state.tagsViewList)
      }
    },

4. 利用vue里面的provide+inject组合

  1. App.vue注入provide
<template>
  <router-view v-if="isRouterAlive" />
</template>

<script setup>
import { ref, provide, nextTick } from 'vue'
import { useStore } from 'vuex'
import { generateNewStyle, writeNewStyle } from '@/utils/theme'

const isRouterAlive = ref(true)
const forceRefresh = () => {
  isRouterAlive.value = false
  nextTick(() => {
    isRouterAlive.value = true
  })
}
provide('forceRefresh', forceRefresh)

const store = useStore()
generateNewStyle(store.getters.mainColor).then((newStyleText) => {
  writeNewStyle(newStyleText)
})
</script>

<style lang="scss"></style>
  1. 强制刷新引入inject
import {inject } from 'vue'
const forceRefresh = inject('forceRefresh'),
const onRefreshClick = () => {
  // 刷新整个页面
  // router.go(0)
  // location.reload()
  // 局部刷新
  // router.replace({ path: `/redirect${route.path}` })
  // 下部页面整体刷新
  forceRefresh()
}