路由器推送重定向页面，但不重新获取该页面中的数据

Question

$router.push("/") 正确重定向到主页，但主页必须获取新数据，但它没有。它具有与以前相同的数据。

可能是因为创建了网络历史记录，但我稍后需要此功能。

主页从 JSON 服务器获取数据。

export default {
  name: "Home",
  data() {
    return {
      todos: [],
    };
  },
  components: {
    SingleTodo,
  },
  mounted() {
     fetch("http://localhost:3000/todos")
          .then((res) => res.json())
          .then((data) => (this.todos= data))
          .catch((err) => console.log(err.message));
  }

然后 returns 要显示的列表。

我添加了一个新页面以将数据添加到该 JSON 服务器中，该服务器工作正常。成功推送数据后，我想重定向到主页。我正在做的就像下面的片段。

let todo = {
        name: this.name,
        details: this.details,
        completed: false,
      };
      fetch("http://localhost:3000/todos", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(todo),
      })
        .then(this.$router.push("/"))
        .catch((err) => console.log(err.message));

这成功地将值存储到 JSON 服务器中，并且 $router.push("/") 将其重定向到主页 但它不会从 JSON 服务器.

重新获取数据

路由器配置：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import AddProject from '../views/AddProject.vue'    
const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/add',
        name: 'AddProject',
        component: AddProject
      }
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router

Answer 1

问题是您使用了 mounted() 而不是 created()。有时它不起作用。也许其他人对此会有更好的解释。您可以在 official docs 中阅读更多关于 vue 生命周期的内容

你代码中的另一件事是使用方法而不是直接在mounted()或created()中编写函数你的代码应该是这样的。

 methods:{
        getTodo(){
 fetch("http://localhost:3000/todos")
          .then((res) => res.json())
          .then((data) => (this.todos= data))
          .catch((err) => console.log(err.message));
}
},
created(){
this.getTodo()
}

这会让你的代码看起来更干净，以后不会让你感到困惑

Answer 2

问题出在 JSON 服务器 上。它有助于启动本地服务器并查看文件中的数据。这有利于开发目的。

但我注意到的是

 let todo = {
    name: this.name,
    details: this.details,
    completed: false,
  };
  fetch("http://localhost:3000/todos", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(todo),
  })
    .then(this.$router.push("/"))
    .catch((err) => console.log(err.message));

在此 JSON 服务器在完全更新文件之前成功进入 .then()。然后我更改了代码

.then(setTimeout(() => {
        this.$router.push("/");
      }, 1000))

重定向后，我获得了所有添加的值。当我并排打开浏览器和数据文件时，我也可以看到它，浏览器首先重定向，然后文件更新。 （但是，这不是正确的检查方式，这就是我添加 setTimeout 的原因）

感谢大家在评论中的贡献。

路由器推送重定向页面，但不重新获取该页面中的数据

Router push redirects the page, but not refetch the data in that page

vue.js

vue-router