Vue Router：浏览器导航按钮返回不起作用

Question

在我的 Vue 应用程序中，我使用

vue router

计算从创建页面到编辑页面的导航。

用例：

• 创建资源
• 成功后进入编辑页面

上面的用例运行良好。

更多用例：

• 单击按钮 浏览器返回

预期：默认创建页面内容（创建表单）
实际：路线已改变，内容不变（编辑表格）

看来，路由器历史记录失败了。

路由器/index.ts

import {createRouter, createWebHashHistory} from 'vue-router';
...
import testRoute from  './test_route'

const routes = [
  ...
  testRoute
]
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router;

路由器/test_r oute/index.ts

import TestPage from "@/module/test/page";
...
import TestDetail from "@/module/test/view/detail";

const route = {
    component: TestPage,
    path: "/test/page",
    redirect: ...,
    children: [
        ...,
        {
            path: 'create-test', 
            name: "testDetailCreate",
            component: TestDetail
        },
        {
            path: 'edit-test/:id?', 
            name: "testDetailEdit",
            component: TestDetail
        }
    ]
}

export default route;

~/详情/索引，ts

export default defineComponent({
  ...
  methods: {
    ...,
    createHandling() 
      {
        ...
        fetch("%create-resource%", {
          ...
        }).then((resp) => {
          ...
          return resp.json()
        }).then(data => {
          // set store vars
          ...
          this.$router.push({name: 'testDetailEdit', params: {id: data.id}});
          // location.href = "/edit-test/" + data.id;
          // location.reload()
        })
      },
  }
})

我用

location.href

和

this.$router.push

尝试上面的代码，两者都具有相同的意外结果。

所以我的问题是，为什么 vue 路由器历史记录在 浏览器导航中不起作用？

Answer 1

无论你多么努力，异步请求都会有延迟。因此，要么在请求期间根本不显示背景颜色，要么不发出异步请求，而是将颜色直接插入到

App

:

const colors = ["red", "blue", "green"];
const backgroundColor = colors[Math.floor(Math.random() * colors.length)]
const App = () => {
  return (
    <div style={{ backgroundColor }}>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
      <h1>color content</h1>
    </div>
  );
};
export default App;

代码沙盒