New Router页面上的组件只有在手动刷新整个页面后才会加载-PHP中文网问答

我添加了一条新路线，并添加了过渡到新路线的动画。

我添加了以下代码，当单击按钮时，该代码会推送新路由（/first）：

/* From the Template */

    
      
    
  

/* From the Script */
 methods: {
    onClickTransition() {
      this.$router.push("/first");
    },

现在的问题是，当我单击按钮并调用“onClickTransition”方法时，路由器似乎被推送得很好，但页面是空的。仅当我通过按 ctrl+R 手动刷新页面时才会呈现组件。

我相信问题可能来自动画的插入，但如果我手动刷新页面，动画效果就很好。所以我不知道问题是什么。我将非常感谢您的帮助。

这是 app.vue 的其余代码：

index.js 中的代码部分：

import { createRouter, createWebHistory } from "vue-router";
import MainPage from "../views/MainPage.vue";
import FirstScene from "../views/FirstScene.vue";

const routes = [
  {
    path: "/",
    name: "main",
    component: MainPage,
  },
  {
    path: "/first",
    name: "first",
    component: FirstScene,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

“onClickTransition”方法来自“PreStartPage.vue”组件，该组件是主路由“MainPage.vue”的子组件。

一旦在“PreStartPage.vue”中单击“Next”按钮，它就会使用 this.$emit."MainPage.vue" 向“MainPage.vue”发送一个事件，然后使用名为“的方法接收该事件” onClickNext1”，它通过另一个 this.$emit 向“App.vue”发送信号。这就是 App.vue 中显示的“@clickedNext1”的来源。

以下是“PreStartPage.vue”中的代码：

这是来自“MainPage.vue”的代码：