vue3中实现页面onload(onMounted)和onshow(watch监听页面路径变化,前后相同即为onshow)
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
const id = ref('');
// 在组件加载时获取初始参数
onMounted(() => {
id.value = route.params.id;
console.log('Component is mounted with id:', id.value);
// 执行其他加载逻辑
});
// 监听路由参数变化
watch(() => route.params, (newParams, oldParams) => {
if (newParams.id !== id.value) {
id.value = newParams.id;
console.log('Route parameter changed to:', id.value);
// 执行相应的逻辑
}
});
return {
id
};
}
};