如何使用vue router做阶梯式导航？

Question

我想为用户注册页面制作阶梯式导航我想让每一步都有不同的路线，但我需要保持每一步的 url 相同，这样用户将无法直接进入第 3 步。

这是我目前拥有的路线：

{
  path: '/signup',
  component: SignupPage,
  children: [
    { path: '', name: 'signup.step1', component: SignupStep1 },
    { path: '', name: 'signup.step2', component: SignupStep2 },
    { path: '', name: 'signup.step3', component: SignupStep3 },
    { path: '', name: 'signup.step4', component: SignupStep4 }
  ]
}

注册页面：

<header>...</header>
<router-view />
<footer>...</footer>

注册步骤 1:

methods: {
  nextStep () {
    this.$router.push({ name: 'signup.step2' })
  }
  ...
}

但是当调用 nextStep 方法时，似乎没有任何变化

Answer 1

我会简短地回答这个问题。

解决此任务的两种最佳方法 - 使用 Vuetify 及其即用型 Steppers-component 和第二种 - 通过 params 从一步到下一步传递数据。

让我解释一下第二个选项：vue-router 允许我们轻松地将任何类型的数据从一个 url 传递到另一个，甚至无需以某种方式向最终用户显示该数据。如何在 url 之间传递数据，您可以在 vue-router docs 中阅读，在您的情况下，您甚至不需要 4-5-6 个组件，使用 1 个组件 + 标签栏或任何用于切换步骤的其他元素。

but when nextStep method called nothing seems to change

发生这种情况是因为您有 4 个具有相同值的路径 - 一个空值。 vue-router 从上到下搜索路由，如果找到与当前路径匹配的路由，则不会检查其他记录，这就是为什么你只看到 singup-page.

如何使用vue router做阶梯式导航？

How to make stepped navigation using vue router?

vue.js

vue-router