Router跳转到Vue页面onMounted事件不执行？

现象

同事问我：为什么我这个项目的Vue页面，onMounted事件只执行一次？使用router跳转回来的时候就不会执行了，我记得在其另外一个项目是每次都执行的。
上代码（Vue3）：

<script setup>
// page A, path='/page-a'
onMounted(()=>{
	console.log('onMounted')
})
const toPageB = ()=>{
	router.push({
		path: 'page-b'
	})
}
</script>

<script setup>
// page B, path='/page-b'
const back = ()=>{
	router.back()
}
</script>

page-a首次加载时打印 onMounted，从page-b返回时则不打印 onMounted了。

分析

通过对比，每次都执行和只执行一次的页面，调用脚本都是一样的，那应该跟调用代码没关系，应该是其他地方的代码或配置导致了这个情况。
后面想到keep-alive这个组件，遂找出文档来细看（地址在这里：Vue Components #keep-alive）

再对比下两个项目，果然一个是使用了keep-alive，而另一个没有。

<!-- 每次都执行onMounted的页面 -->
<template>
  <div class="layout">
    <router-view />
  </div>
</template>

<!-- 只执行一次onMounted的页面 -->
<template>
  <div class="layout">
  	<keep-alive>
    	<router-view />
    </keep-alive>
  </div>
</template>

解决

使用了keep-alive组件缓存组件状态的，如果还想每次切换时执行某个方法，可以使用activated钩子。

<script setup>
// page A, path='/page-a'
onMounted(()=>{
	console.log('onMounted')
})
onActivated(()=>{
	console.log('每次组件显示都执行')
})
const toPageB = ()=>{
	router.push({
		path: 'page-b'
	})
}
</script>