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组合
- 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>
- 强制刷新引入inject
import {inject } from 'vue'
const forceRefresh = inject('forceRefresh'),
const onRefreshClick = () => {
// 刷新整个页面
// router.go(0)
// location.reload()
// 局部刷新
// router.replace({ path: `/redirect${route.path}` })
// 下部页面整体刷新
forceRefresh()
}