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

问题描述

我有一个 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 路由系统是错误的。

解决方法

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