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

Question

我用Vue创建了一个应用程序，带有一些不同的视图/组件。视图/组件必须按特定顺序运行（Main Page-

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

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

越来越专业，我实现了vue路由器，不知何故打破了我的应用程序，因为我现在能够欺骗逻辑通过一个步骤，只需手动更改网址。

我可以考虑实施一些导航保护，但随后我必须将条件移动到我的路由器/索引。js文件，我认为它不是很漂亮。

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

我很感激提示，谢谢。

Answer 1

我也有类似的问题。

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

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

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

1. 在应用程序中设置值。vue（包含路由器视图）作为数据。为每条路线提供价值道具。每个路由检查步骤是否有效，并使用$router将url更改为有效步骤。更换以防止向后导航。如果步骤对此url有效，请在更改url之前处理逻辑并发出新步骤号

应用程序。vue

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

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

一些omponent.vue

<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>

一些omponent.vue

<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>

Answer 2

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

state: {
  step: 1
}

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

// import store from '@/store';
{
  path: '/step/:sid',
  name: 'step',
  component: Step,
  ...

现在，您可以将应用程序定向到http://localhost:8080/step/5。变量to。params。sid将匹配该路由中的5。因此，在进入前的保护中，检查参数是否与商店的步骤匹配。

  ...
  beforeEnter: (to, from, next) => {
    const nextStep = parseInt(to.params.sid);   // convert string param to number
    if (nextStep === store.state.step) {        // is this the current allowed step?
      next();                                   // if so, it's ok
    } else {                                    // if not, direct to that step
      next({ name: 'step', params: { sid: store.state.step }})
    }
  }
},

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

额外：

您还可以更改if条件以允许访问前面的步骤：

if (nextStep > 0 && nextStep <= store.state.step) {