Vue3/Quasar2：仅调用子路由时Layout的onMounted仍触发？求解决

1. 调整路由结构，统一MainLayout的路由层级 #

当前问题的核心是/main和/catalog-of-works作为平级路由，都单独引用了MainLayout，导致切换时会重复创建组件实例。将所有需要MainLayout的路径统一作为它的子路由，确保Layout仅挂载一次，只有完全离开Layout对应的路径范围时才会卸载。

修改后的routes.js代码：

const routes = [
  {
    path: '/',
    component: () => import('layouts/StartpageLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') }
    ]
  },
  // 所有使用MainLayout的路径都作为该路由的子路由
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: 'main',
        component: () => import('pages/MainPage.vue'),
        children: [
          {
            path: 'subsite-one',
            component: () => import('pages/main/SubsiteOnePage.vue')
          },
          {
            path: 'subsite-two',
            component: () => import('pages/main/SubsiteTwoPage.vue')
          }
        ]
      },
      {
        path: 'catalog-of-works',
        children: [
          // 可选：添加默认子路由，访问/catalog-of-works时显示对应内容
          { path: '', component: () => import('pages/catalog/CatalogDefault.vue') },
          {
            path: ':category',
            component: () => import('pages/catalog/CatalogOfWorks.vue'),
          }
        ]
      },
      // 若有其他使用MainLayout的路径（如/books），也添加到这里
      { path: 'books', component: () => import('pages/BooksPage.vue') }
    ]
  },
  {
    path: '/startpage/home',
    redirect: '/'
  },
  {
    path: '/:pathMatch(.*)*',
    component: () => import('pages/PageNotFound.vue')
  }
]

export default routes

注：已修正原代码中.vue.vue的错误文件后缀。

2. 控制动画与钩子函数的触发时机 #

如果布局内使用了路由过渡动画（如Quasar的QPageTransition或Vue原生Transition），需要确保仅在布局切换时触发动画和钩子逻辑，子路由切换时不触发。

在MainLayout.vue中添加路由监听逻辑：

<template>
  <div>
    <!-- 仅布局切换时触发过渡动画 -->
    <QPageTransition
      :appear="isLayoutSwitch"
      :enter="isLayoutSwitch"
      :leave="isLayoutSwitch"
    >
      <router-view />
    </QPageTransition>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const isLayoutSwitch = ref(false)
const prevRoutePath = ref(null)

// 监听路由变化，判断是否发生布局切换
watch(route, (to, from) => {
  // 检查当前路由是否属于MainLayout的子路由
  const toIsMainLayout = to.matched.some(item => item.component.name === 'MainLayout')
  const fromIsMainLayout = from.matched.some(item => item.component.name === 'MainLayout')
  
  // 仅当跨布局切换时（如从StartpageLayout到MainLayout，反之亦然）启用动画
  isLayoutSwitch.value = toIsMainLayout !== fromIsMainLayout
  if (isLayoutSwitch.value) {
    prevRoutePath.value = from.fullPath
  }
}, { immediate: true })

onMounted(() => {
  // 仅从非MainLayout路径进入时执行初始化逻辑
  if (!prevRoutePath.value || !prevRoutePath.value.startsWith('/main') && !prevRoutePath.value.startsWith('/catalog-of-works')) {
    console.log('onMounted - MainLayout 首次挂载或从外部布局进入')
    // 执行你的淡入动画逻辑
  }
})

onUnmounted(() => {
  console.log('onUnmounted - MainLayout 卸载（离开到外部布局）')
})
</script>

3. 核心原理 #

• 统一路由层级后，MainLayout作为父组件，仅在首次进入其下任意子路径时挂载，完全离开所有子路径（跳转到其他布局的路径）时卸载，子路由切换不会触发组件的挂载/卸载。
• 通过路由匹配判断布局切换状态，精准控制动画和钩子函数的执行时机，避免子路由切换时的误触发。

内容的提问来源于stack exchange，提问作者Robert Wildling