Javascript 使用vue和vue路由器确保视图顺序的最佳实践

我用Vue创建了一个应用程序，其中包含一些不同的视图/组件。视图/组件必须按特定顺序运行（主页->步骤1->步骤2->步骤3->最终页面-->主页…）

在学习Vue的过程中，我使用v-if指令管理导航，该指令运行良好，因为没有URL，因此我能够在每个视图/组件中实现逻辑，如

//pseudocode in each view/component
checkConditionsToMoveOn ? moveToNextPae : showErrorWithModalAndStayOnPage;

越来越专业，我实现了vue路由器，这在某种程度上破坏了我的应用程序，因为我现在可以通过手动更改URL来欺骗逻辑来通过一个步骤

我可以考虑实现一些导航卫士，但随后我必须将条件移动到我的router/index.js文件中，我认为这个文件并不漂亮

有没有解决这个问题的最佳实践

谢谢你的提示。

我也有类似的问题

我认为最好的解决办法是把步骤放在单一路线上。这很容易处理，也很难欺骗逻辑

但是，如果出于某些原因必须将步骤拆分为路由（每个步骤都太大，无法放入单个路由或…），则可以将步骤计数器用作全局（路由器视图上方）

我建议用两种方法设置全局值

将App.vue（包含路由器视图）中的值设置为数据。为每条路线提供价值道具。每个路由检查步骤是否有效，并使用

$router将url更改为有效步骤。替换
以防止向后导航。如果步骤对此url有效，请在更改url之前处理逻辑并发出新步骤号

App.vue

<template>
  <router-view :step="fooStep" @changeStep=changStep />
</template>

<script>
export default {
  data () {
    return {
      fooStep: 0
    }
  },
  methods: {
    changeStep (value) {
      this.step = value
    }
  }
}

---

使用Vuex跟踪步骤进度的当前状态：

状态：{
步骤：1
}

当用户访问任何步骤时，您将检查此状态。如果请求的步骤路由与此不匹配，您将重定向到它。要实现这一点，请使用以下内容定义路线：

//从'@/store'导入存储；
{
路径：'/step/：sid'，
名称：'步骤'，
组成部分：步骤，
...

现在，您可以将应用程序定向到

http://localhost:8080/step/5

。变量

to.params.sid

将与该路径中的

5

匹配。因此，在

进入前

保护中，检查参数是否与商店的步骤匹配

。。。
beforeEnter:（到、从、下一个）=>{
const nextStep=parseInt（to.params.sid）；//将字符串param转换为数字
如果（nextStep==store.state.step）{//这是当前允许的步骤吗？
next（）；//如果是这样，就可以了
}否则{//如果没有，请直接执行该步骤
下一步（{name:'step'，参数：{sid:store.state.step}}）
}
}
},

每当一个步骤完成时，您都会增加存储步骤，然后将路由器引导到下一个步骤

额外：

您还可以更改

if

条件以允许访问前面的步骤：

---

if（nextStep>0&&nextStep非常感谢您的回答。我不想不使用路由，因为我觉得我以后会需要它们。此外，我正在使用vuex，所以我将尝试您的第二个选项。我也在考虑使用导航卫士，但随后我必须将逻辑从视图/组件中移出，我不知道这一点。）我很喜欢…而且我必须考虑如何显示我的警告/对话框模式。无论如何，这一切都感觉不自然。。。
<script>
export default {
  name: 'Step3', /* optional */
  props: ['step'],
  mounted () {
    /* some logic to check step is valid */
    if (this.step !== 3) {
      this.$router.replace(this.step > 0 ? '/step' + this.step : '/')
    }
  },
  methods: {
    submit () {
      ...
      /* after submit data, send signal to App.vue to change step value */
      this.$emit('changeStep', 4)
      /* change url */
      this.$router.replace('step4')
    }
  }
}
</script>

<script>
export default {
  name: 'Step3', /* optional */
  mounted () {
    /* some logic to check step is valid */
    const step = this.$store.state.step
    if (step !== 3) {
      this.$router.replace(step > 0 ? '/step' + step : '/')
    }
  },
  methods: {
    submit () {
      ...
      /* after submit data, store new step value in vuex */
      /* change the value directly is not good */
      this.$store.state.step = 4 
      /* change url */
      this.$router.replace('step4')
    }
  }
}
</script>