Router Navigation Guard

VUEでは、データ呼び出しポイントは大きく2つに分けられる.

ルータナビゲーション保護
特定のURLにアクセスする前の動作の属性(関数)

を定義する.

構成部品ライフサイクルフック
構成部品の作成直後に呼び出される論理

どちらの場合も、ルータを呼び出し、ライフサイクルフックを呼び出します.
この授業では、ルータのナビゲーション保護について説明します.

Navigation Guard

これは、ルータが移動されたときに特定の論理を設定することを意味する.
Guardは2種類に分かれています.

戦役衛兵

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

ルーティングガード

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

ルーティング特定の保護プログラムmixinを使用します.jsの論理を移行します.

// route/index.js

const loadData = (to, from, next) => {
  bus.$emit('start:spinner');
    store.dispatch('FETCH_LIST', to.name)
      .then(() => {
        next();
      })
      .catch(err => {
        console.log(err);
      });
}

export const router =  new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/news'
    },
    {
      path: '/news',
      name: 'news',
      component: NewsView,
      beforeEnter: loadData,
      // component: createListView('NewsView'),
      meta: {
        page: 1,
        type: 'lr'
      }
    },
    {
      path: '/ask',
      name: 'ask',
      component: AskView,
      beforeEnter: loadData,
      // component: createListView('AskView'),
      meta: {
        page: 2,
        type: 'lr'
      }
    },
    {
      path: '/item/:id',
      component: ItemView,
      meta: {
        page: 2.1,
        type: 'ud'
      }
    },
    {
      path: '/jobs',
      name: 'jobs',
      component: JobsView,
      beforeEnter: loadData,
      // component: createListView('JobsView'),
      meta: {
        page: 3,
        type: 'lr'
      }
    },
    {
      path: '/user/:id',
      component: UserView,
      meta: {
        page: 100,
        type: 'ud'
      }
    }
  ]
});

beforeEnter:パラメータは部分的に受信できます(to,from,next).

to:到達するルーティングオブジェクト

from:出発点のルーティングオブジェクト

next:ルータ移動トリガコールバック関数

//to, from 객체 구조
{
  fullPath: "/news",
  hash: "",
  matched: [{…}],
  meta: {page: 1, type: "lr"},
  name: "news",
  params: {},
  path: "/news",
  query: {},
}

ソース:Vue.js完璧なガイドライン-実践と学習の実戦概念の再構築を通じて