vue3 由总页面跳转到详情页面，路由后缀会带上id，但是跳转会执行详情页面的onMounted,明显影响性能，怎么才能不执行，只有在进入详情页面时才执行onMounted呢

在 Vue 3 中，当从总页面跳转到详情页面时，路由后缀会带上 ID，这会导致每次跳转都会触发详情页面的 `onMounted` 钩子函数，从而影响性能。为了避免这种情况，可以使用以下几种方法：

1. **使用 `watch` 监听路由变化**：通过观察路由的变化来手动控制数据请求和更新。例如：

    import { watch } from 'vue';
    import { useRoute } from 'vue-router';

    export default {
      setup() {
        const route = useRoute();
        watch(
          () => route.params.id,
          (newId) => {
            // 在这里执行数据请求和更新操作
          }
        );
      }
    }

2. **使用计算属性**：将数据请求逻辑放在计算属性中，这样只有在相关数据发生变化时才会重新请求。例如：

    import { computed, ref } from 'vue';
    import { useRoute } from 'vue-router';

    export default {
      setup() {
        const route = useRoute();
        const id = ref(route.params.id);

        const data = computed(() => {
          // 根据 id 获取数据
          return fetchDataById(id.value);
        });
      }
    }

3. **使用 `beforeRouteUpdate` 导航守卫**：在路由更新之前执行特定的逻辑，从而避免重复执行 `onMounted`。例如：

    import { useRoute } from 'vue-router';

    export default {
      setup() {
        const route = useRoute();

        function beforeRouteUpdate (to, from, next) {
          // 在这里执行数据请求和更新操作
          next();
        }
      }
    }

4. **使用 `key` 强制重新渲染组件**：在 `<router-view>` 上添加 `:key="$route.fullPath"`，这样每次路由变化时都会重新渲染组件。例如：

    <router-view :key="$route.fullPath"></router-view>

通过以上方法，可以有效避免在详情页面每次跳转时都执行 `onMounted`，从而提高应用的性能。