javascript - 将 Vuetify v-stepper 与 Vue 路由器动态集成
问题描述
我想将 vuetify 的v-stepper与 vue 路由器集成。我的要求如下:
- 每个步骤都有自己的路线(例如
/myform/step1
,/myform/step2
,/myform/step3
, 等) - 每个步骤都是独立的组件,它是动态加载的(延迟加载)。
- 每个步骤都是动态创建的(例如通过循环)。
这更像是一个“什么是最好的方法”之类的问题。我尝试了多种解决方案,但没有一个符合我的要求。
- 我尝试创建嵌套路由并
router-view
在v-stepper-content
. 下面的例子。position
我在这里遇到的问题是同步更新(参见 v-stepper 元素)和路线是不可能的。因此,您将始终在步骤更新之前看到路线更新。
<v-stepper v-model="position" vertical>
<template v-for="(item, index) in steps">
<v-stepper-step :complete="position > index + 1" :step="index + 1">
<h2>
{{item.title}}
</h2>
</v-stepper-step>
<v-stepper-content :step="index+1">
<router-view></router-view>
</v-stepper-content>
</template>
</v-stepper>
- 我尝试的另一个解决方案是直接异步/动态加载组件(所以没有路由器)。但是,然后我失去了使用浏览器的后退和下一步按钮浏览我的 v-stepper 的美妙能力。
以我的经验,最大的缺陷是(与例如 v-tab 相反),每一步都必须有自己的v-stepper-content
. 如果我要使用选项卡执行此操作,我只需创建一个tab-item
并更新视图。我不能这样做v-stepper
,因为它不会继续到下一个“步骤”。
有人会有创造性的方法吗?
解决方案
我能够通过执行以下操作来实现这一点:
<v-stepper-step @click="goToRoute('step1')">
和
goToRoute(name) {
this.$router.push({'name': name})
}
你应该能够做到这一点:
<v-stepper-step @click="$router.push({'name': name})">
推荐阅读
- java - websphere部署生成的web_merged.xml和ibm-metadata.xml文件是什么?
- c# - C# Mongodb 通过查找进行搜索很昂贵
- typescript - 道具可能未定义
- angular - 在ionic5中使用大量项目时离子切片的性能问题
- python - 如何使用(x,y)python将行拟合到2个数组
- r - 指定外部库但不在函数级别
- python - Pandas 合并具有相同 id 行的列表
- angular - 以角度的静态方法访问 ag-Grid ColumnApi
- mysql - 在 Mysql for Postgresql 中替代“set @myvariable = value”
- intellij-idea - 如何在 IntelliJ IDEA 的拆分选项卡中打开新文件?