获取商店的值后 Vue 重定向

Question

我试图制作一个编辑页面 /edit/:id 其中输入的值来自 vuex 商店，但是如果商店没有相同的任务我想重定向到 /404 的参数 ID，我该如何实现？试过 created() 但没有成功。我正在使用 Vue3

<script>
export default {
  name: "EditTaskForm",
  data() {
    return {
      newTaskDesc: "",
    };
  },
  created() {
    const task = this.$store.getters.getTaskById(Number(this.$route.params.id));
    if (!task) this.$router.push("/404");
  },
  mounted() {
    const task = this.$store.getters.getTaskById(Number(this.$route.params.id));
    this.newTaskDesc = task.desc;
  },
  methods: {
    submitEdit() {
      this.$store.dispatch("editTask", {
        newTaskDesc: this.newTaskDesc,
        id: Number(this.$route.params.id),
      });
      this.$router.push("/");
    },
  },
};
</script>

Answer 1

尝试以下操作：

beforeRouteEnter(to, from, next) {
  const task = this.$store.getters.getTaskById(Number(this.$route.params.id));
  if (!task) this.$router.push("/404");
},

<script>
export default {
  name: "EditTaskForm",
  data() { ... },
  mounted() { ... },
  methods: { ... },
  beforeRouteEnter(to, from, next) {
    const task = this.$store.getters.getTaskById(Number(this.$route.params.id));
    if (!task) this.$router.push("/404");
  }
};
</script>

Navigation Guards

获取商店的值后 Vue 重定向

Vue redirect after getting store's values

vue.js

vue-router

vuex

vuejs3