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

【问题标题】：VueJS component called 2 times in nested route using Laravel使用 Laravel 在嵌套路由中调用 2 次 VueJS 组件
【发布时间】：2021-04-22 15:18:29
【问题描述】：

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

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

OnboardingForm.vue：父视图，调用子组件。

<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 路由调用 Controller web.php

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

请注意，此控制器仅返回刀片文件 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 路由系统可能是我的错误。

【问题讨论】：

您是否研究过“同时使用 VueJS 和 Laravel 路由系统可能（存在）错误”？
你能把你的setStep函数放上去吗？
@KamleshPaul 谢谢你的回答。我放了完整的 OnboardingForm.vue，虽然setStep 方法似乎不是问题的一部分

标签： laravel vue.js nested-routes

【解决方案1】：

问题来自刀片文件：我直接调用父组件<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>

【讨论】：