vue3 路由执行顺序问题？

• Z时代
• 2024-03-15
• 分类：IT

当访问 /test/test1/test2 的时候，有没有办法让他先执行完成 ../views/test/IndexView.vue 里面的所有方法后，再进入 ../views/test/test1/IndexView.vue 里面执行完成所有方法后，最后才进入 ../views/test/test1/test2/IndexView.vue 里面

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/test',
            name: 'test',
            component: () => import('../views/test/IndexView.vue'),
            children: [
                {
                    path: 'test1',
                    name: 'test1',
                    component: () => import('../views/test/test1/IndexView.vue'),
                    children: [
                        {
                            path: 'test2',
                            name: 'test2',
                            component: () => import('../views/test/test1/test2/IndexView.vue')
                        }
                    ]
                }
            ]
        }
    ]
})

../views/test/IndexView.vue

<template>
    <RouterView />
</template>
<script>
export default {
    name: "IndexView",
    setup() {
        const indexFn = () => {
            setTimeout(function() {
                console.log('index')
            }, 3000);
        };
        onMounted(() => {
            indexFn();
        })
        return {}
    }
}
</script>

../views/test/test1/IndexView.vue

<template>
    <RouterView />
</template>
<script>
import {onMounted} from "vue";
export default {
    name: "IndexView",
    setup() {
        const indexFn = () => {
            setTimeout(function() {
                console.log('test1')
            }, 2000);
        };
        onMounted(() => {
            indexFn();
        })
        return {}
    }
}
</script>

../views/test/test1/test2/IndexView.vue

<template>
    <h1>test2</h1>
</template>
<script>
import {onMounted} from "vue";
export default {
    name: "IndexView",
    setup() {
        const indexFn = () => {
            setTimeout(function() {
                console.log('test2')
            }, 1000);
        };
        onMounted(() => {
            indexFn();
        })
        return {}
    }
}
</script>

回答：

在test1/IndexView的 RouterView 上加 v-if，indexFn再渲染即可

以上是 vue3 路由执行顺序问题？ 的全部内容， 来源链接： utcz.com/p/933388.html