使用 Laravel 在嵌套路由中调用 VueJS 组件 2 次

Question

我有一个 Laravel 应用程序，我正在尝试添加一个 vuejs 表单。该表单有 3 个不同的步骤，所以我想使用 vuejs nested routes.

问题是 parent 组件被调用了 2 次。

OnboardingForm.vue : parent 视图，调用 child 个组件。

<template>
    <div class="steps-container">
        <div class="container">
            <div class="step-progress">
            Current step x {{ current_step }}
            </div>

            <router-view v-on:setStep="setStep"></router-view>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            current_step: null
        }
    },
    methods: {
        setStep(step) {
            this.current_step = step;
        },
    }
}
</script>

路由器视图工作正常，但 <div class="steps-container"> 渲染了 2 次：

<div class="steps-container">
  <div class="container">
    <div class="step-progress">
      Current step
    </div>
    <div class="steps-container">
      <div class="container">
        <div class="step-progress">
          Current step from-component-1
        </div>
        <!-- Then the child component is successfully rendered -->
        <div class="content-of-component">Component 1</div>
      </div>
    </div>
  </div>
</div>

关联文件

Laravel路由调用控制器web.php

Route::get('/onboarding/{any?}', [App\Http\Controllers\FormController::class, 'onboarding']);

请注意，此控制器仅返回 blade 文件 view('onboarding')。另外 onboarding.blade.php 正在调用我的主要组件 <OnboardingForm>

VueJS 路由

const router = new VueRouter({
mode: 'history',
routes: [
    {
        path: '/onboarding',
        component: OnboardingForm,
        children: [
            {
                path: 'step1',
                component: Component1
            },
            {
                path: 'step2',
                component: Component2
            }
        ]
    },
],
});

同时使用 VueJS 和 Laravel 路由系统可能是我的错误。

Answer 1

问题来自 blade 文件：我直接调用父组件 <onboarding-form> 而不是 <router-view>。

所以组件加载了一次，然后路由系统尝试再次加载它。

mybladefile.php

<div class="container" id="steps">
    <onboarding-form></onboarding-form>
</div>

成为

<div class="container" id="steps">
    <router-view></router-view>
</div>

使用 Laravel 在嵌套路由中调用 VueJS 组件 2 次

VueJS component called 2 times in nested route using Laravel

laravel

vue.js

nested-routes

关联文件