Vue3路由机制的默认行为是，初次加载PageA，PageA刷新；PageA->PageB, PageB会刷新；PageB返回PageA，如果开启了Keep-Alive，将不自动刷新。
以下方法在路由push后强制刷新：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <button @click="redirectReload">Redirect & Reload</button> </template> <script> export default { methods: { redirectReload() { this.$router .push({ path: '/expedition' }) .then(() => { this.$router.go() }) } } } </script> |
注意，这种方式相当于window.reload，整页刷新，效率低且体验不好。
还有一种办法是在rootview上加key，这种方式体验较好。
|
1 2 3 4 5 6 7 |
<router-view v-slot="{ Component }" v-if="isRouteActive" :key="route.query"> <!--重点在key，其它可以忽略--> <transition :name="setTransitionName" mode="out-in"> <keep-alive :include="getKeepAliveNames"> <component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" /> </keep-alive> </transition> </router-view> |
在需要强制刷新的push页面，带一个随机数参数
|
1 |
router.push({path:'/sompath/somepage', query: {q:Math.random()}}) |
