【vue】路由元信息meta

路由元信息

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

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

設置title

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

我們可以在鉤子函數router.beforeEach中獲取meta中的title數據，並設置爲頁面標題。

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的屬性狀態進行判斷
    if (store.state.user.token) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }