vue的路由動畫切換頁面無法讀取meta值的bug記錄

更新時間：2023年05月16日 14:33:39 作者：Amelia Pond

這篇文章主要介紹了vue的路由動畫切換頁面無法讀取meta值的bug記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue路由動畫切換頁面無法讀取meta值的bug

在vue項目的二級路由中，想要通過設置路由表中的meta值，來判斷頁面的slide-left 和slide-right的方向。

對于從左到右的排列，給routes依次設為1,2,3,4…的值，使其可以通過大小來判斷from和to，并顯示出不同的劃入 / 劃出效果

{
?? ?path: 'aaa',
?? ?name: 'aaa',
?? ?component: aaa,
?? ?meta:1
},
{
?? ?path: 'bbb',
?? ?name: 'bbb',
?? ?component: bbb,
?? ?redirect:'bbb/baba',
?? ?meta:2,
?? ?children: [
?? ?{
?? ??? ?path: 'baba',
?? ??? ?name: 'baba',
?? ??? ?component: baba
?? ?}, {
?? ??? ?path: 'ccc',
?? ??? ?name: 'ccc',
?? ??? ?component: ccc
?? ?}, {
?? ??? ?path: 'ddd',
?? ??? ?name: 'ddd',
?? ??? ?component: ddd
?? ?}, {
?? ??? ?path: 'eee',
?? ??? ?name: 'eee',
?? ??? ?component: eee
?? ?}, {
?? ??? ?path: 'fff',
?? ??? ?name: 'fff',
?? ??? ?component: fff
?? ?}],
},
{
?? ?path: 'ggg',
?? ?name: 'ggg',
?? ?meta:4,
?? ?component: ggg
},
{
?? ?path: 'hhh',
?? ?name: 'hhh',
?? ?meta:3,
?? ?component: hhh
},

然鵝，

在設置的過程中，其中一個路由始終無法讀到all這個路由中的meta：2

導致切換路由的動畫效果出了問題

問題原因

讀不到的meta的是因為設置了子路由以及重定向。

解決方法

把meta值加在它的子路由上，

{
?? ?path: 'bbb',
?? ?name: 'bbb',
?? ?component: bbb,
?? ?redirect:'bbb/baba',
?? ?//meta:2,
?? ?children: [
?? ?{
?? ??? ?path: 'baba',
?? ??? ?name: 'baba',
?? ??? ?component: baba,
?? ??? ?meta:2
?? ?}, {
?? ??? ?path: 'ccc',
?? ??? ?name: 'ccc',
?? ??? ?component: ccc
?? ?}, {
?? ??? ?path: 'ddd',
?? ??? ?name: 'ddd',
?? ??? ?component: ddd
?? ?}, {
?? ??? ?path: 'eee',
?? ??? ?name: 'eee',
?? ??? ?component: eee
?? ?}, {
?? ??? ?path: 'fff',
?? ??? ?name: 'fff',
?? ??? ?component: fff
?? ?}],
},

vue路由元信息meta

路由元信息

定義路由的時候可以配置meta字段。

那么我們可以利用meta字段來做什么呢？

設置title

? ? name: 'category',
? ? component: () => import('./view/creatBrainStorm/creat/category'),
? ? meta: {
? ? ? title: '卓腦'
? ? }

我們可以在鉤子函數(shù)router.beforeEach中獲取meta中的title數(shù)據(jù)，并設置為頁面標題。

router.beforeEach((to, from, next) => {
? const title = to.meta && to.meta.title
? if (title) {
? ? document.title = title
? }
}

權限校驗（例：登錄校驗）

{
? ? name: 'cart',
? ? component: () => import('./view/cart'),
? ? meta: {
? ? ? title: '購物車',
? ? ? requireAuth: true // 當有這個字段的時候,我們就認為這個路由頁面是要有登錄權限的
? ? }
? }

檢查meta中元字段：

if (to.meta.requireAuth) {
? ? // 不直接通過本地緩存進行判斷,而是通過Vuex的屬性狀態(tài)進行判斷
? ? if (store.state.user.token) {
? ? ? next()
? ? } else {
? ? ? next({
? ? ? ? path: '/login',
? ? ? ? query: { redirect: to.fullPath }
? ? ? })
? ? }
? } else {
? ? next()
? }