0👍
You could do something like this:
// router.js
const vueRoutes = [
{
path: '/',
name: 'home',
component: Home,
},
(...)
{
path: '/wizard', // Define main route for the form
name: 'wizard',
component: AppWizard,
children: [
{
path: 'page1',
name: 'page1',
component: FormPart1, // If the route is '/wizard/page1' it will render the FormPart1 component
},
{
path: 'page2',
name: 'page2',
component: FormPart2, // If the route is '/wizard/page2' it will render the FormPart2 component
}
],
},
(...)
]
// AppWizard.vue
<template>
<my-wizard>
<form>
<router-view>
</form>
</my-wizard>
</template>
// FormPart1.vue
<template>
<fieldset>
<label1/>
<input1>
<label2/>
<input2>
</fieldset>
</template>
// FormPart2.vue
<template>
<fieldset>
<label3/>
<input3>
<label4/>
<input4>
</fieldset>
</template>
Of course, you are free to replace wizard/page1
with pages/1
or whatever.
- [Vuejs]-Vue – change state of another component
- [Vuejs]-How get one single component (carousel) from element-ui if is imported as global config object?
Source:stackexchange.com