我正在使用 Vue 開發移動前端。我想根據當前的標簽索引動態地將路線轉換更改為向左或向右滑動。
我在我的 App.js 中設定了一個轉換組件，它根據這樣的路由切換轉換：
<transition :name="$route.meta.transition" mode="out-in">
所以，為了實作我想要的，我想我可以在每次路由更改時設定一個 beforeEach 掛鉤，然后修改當前的 route.meta.transition，以及我要導航到的路由的 .meta.transition。
以下是路線定義：
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/routines',
name: 'routines',
component: () => import('../views/Routines/IndexView.vue'),
meta: { transition: 'slide-right', index: 0 }
},
{
path: '/routines/create',
name: '/routines/create',
component: () => import('../views/Routines/CreateView.vue'),
meta: { transition: 'zoom-in', index: 0 }
},
{
path: '/routines/:id',
name: '/routines/id',
component: () => import('../views/Routines/RoutineView.vue'),
meta: { transition: 'zoom-in', index: 0 }
},
{
path: '/log',
name: 'log',
component: () => import('../views/LogView.vue'),
meta: { transition: 'slide-right', index: 1 }
},
{
path: '/progress',
name: 'progress',
component: () => import('../views/ProgressView.vue'),
meta: { transition: 'slide-right', index: 2 }
},
{
path: '/settings',
name: 'settings',
component: () => import('../views/SettingsView.vue'),
meta: { transition: 'slide-right', index: 3 }
}
]
})
這是我設定的鉤子，用適當的字串用修改后的路由替換toandfrom路由：
router.beforeEach((to, from, next) => {
console.log(to, from)
if (to.meta.index < from.meta.index) {
console.log({...to, meta: {...to.meta, transition: 'slide-left'}})
router.addRoute({...to, meta: {...to.meta, transition: 'slide-left'}})
console.log({...from, meta: {...from.meta, transition: 'slide-left'}})
router.addRoute({...from, meta: {...from.meta, transition: 'slide-left'}})
}
next()
})
但是，似乎toandfrom引數沒有我之前定義的組件鍵，所以當我addRoute通過導航替換路由然后導航回來時，我收到此錯誤：Error: Invalid route component
確認to和from物件是無效路由：
如何解決此問題以實作動態滑動行為？我認為這種鉤子策略是有道理的。將來，我想添加更多邏輯，以便在您在父頁面和子頁面之間導航時讓我的子頁面放大和縮小。
謝謝！
uj5u.com熱心網友回復：
router.addRoute()您可以直接從路由器掛鉤更新路由元資料，而不是使用。Vue Router 檔案建議使用鉤子afterEach()：
// router.js
router.afterEach((to, from) => {
to.meta.transition = to.meta.index < from.meta.index ? 'slide-right' : 'slide-left'
})
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484195.html
標籤：javascript Vue.js Vue路由器 Vuejs3