總結(jié) 我正在尋找一種解決方案來在 Vue 中跨兩個不同的路由器視圖創(chuàng)建動畫。我遇到的問題是，當(dāng)瀏覽器切換到另一個路由器視圖時，它會重新渲染頁面。所以當(dāng)瀏覽器重新渲染時動畫就會消失。動畫基本上，該應(yīng)用程序有兩個不同的頁面：homepage和aboutpage。當(dāng)用戶單擊藍色菜單按鈕時，綠色導(dǎo)航菜單將從左向右滑動，直到覆蓋整個屏幕。該菜單有兩個鏈接：about和home。如果用戶單擊“關(guān)于”，白色覆蓋層將從左側(cè)移動并覆蓋整個屏幕，然后移動到右側(cè)并消失。關(guān)于頁面消失后顯示。這是codepen示例，演示了我想要實現(xiàn)的動畫效果（該演示沒有使用路由器）。 https://codepen.io/wl1664209734/pen/qBamXEL下面是在codepen中的vue模板中重新創(chuàng)建動畫的代碼我的代碼的解釋這里是codeSandbox鏈接，我在這個沙箱中重現(xiàn)了問題，我認為這將幫助人們更好地理解我的問題。 https://codesandbox.io/s/vue-page-shift-anime-yp1yf在這個沙箱中，我使用了 vue 模板。它包括一個主要組件：App.vue和 5 個其他組件：Homepage.vue、Aboutpage.vue、Background.vue、Navbar.vue、Navigation.vue。背景包含導(dǎo)航欄和導(dǎo)航以形成應(yīng)用程序的靜態(tài)元素。主頁和關(guān)于頁面都有背景和獨特的標題。Homepage的標題是 HOME，Aboutpage的標題是 ABOUT。然后，我在 main.js 中配置路由器，并將 router-view 標簽放入 App.vue中。我還將路由器鏈接添加到Navigation.vue。我向 router-link 添加了一個點擊事件（頁面移位），該事件被發(fā)送到Background.vue。因此，當(dāng)用戶單擊鏈接時，它將調(diào)用 Background.vue中的pageShift方法，導(dǎo)致動畫發(fā)生。