Question

我想对用户注册页面进行逐步导航而且我想将每个步骤都设为不同的路线，但我需要为每个步骤保持相同的网址，以便用户无法直接进入第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 }
  ]
}

SignupPage：

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

SignupStep1：

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

但是当nextStep方法调用什么都没有改变时

Answer 1

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

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

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

但是当调用nextStep方法时似乎什么都没有改变

之所以会这样，是因为您有4个路径具有相同的值-一个空值。 vue-router从顶部到底部搜索路由，如果找到与当前路径匹配的路由，则不会检查其他记录，这就是为什么只看到singup页的原因。

如何使用vue路由器进行分步导航？

1 个答案: