使用 Laravel 在嵌套路由中调用 VueJS 组件 2 次
VueJS component called 2 times in nested route using Laravel
我有一个 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 路由系统可能是我的错误。
问题来自 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 表单。该表单有 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 路由系统可能是我的错误。
问题来自 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>