이 기사의 내용

스마트폰용 웹 앱이나 스마트폰 앱 등에서 자주 있는 헤더의 타이틀이 바뀌는 방법을 간단하게 구현할 수 있게 됩니다.

다음과 같은 이미지입니다. (아이콘이 같기 때문에 이해하기 어려울지도 모르지만 양해 바랍니다)

홈뷰 표시시


어바웃 view 표시시

구현

vue-router로 후터 후크 등록

vue ui등으로 만든 경우 router가 변수가 되어 있지 않기 때문에 변수에 대입하는 점에 주의해 주세요.

초기시

router.js

export default = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  // ----省略----
  ]
})

변경 후

router.js

const router  = new Router({
 routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  // ----省略----
  ]
})
export default router;

이 상태에서 afterEach를 등록합니다.

router.js

export default router;

router.afterEach((to,from) =>{
  console.log('呼ばれたよ!')
})

실행하자 npm의 경우 npm run serve
페이지 전환으로 콘솔에 "불렀다!"라고 표시 되었습니까?

router에 meta 속성 추가

방금 만든 router에 대해 meta 속성을 추가해 봅시다.
meta 속성 중 일부는 아래 예제와 같이 임의로 설정할 수 있습니다.

router.js

const router  = new Router({
 routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        title:'ほーむ',
        hoge:'ほげほげ',
      },
    },
  // ----省略----
  ]
})
export default router;

방금 만든 router로 얻을 수 있는지 확인합시다.

router.js

router.afterEach((to,from) =>{
    console.log(to.meta.title);
    console.log(to.meta.hoge);
})

이쪽도 성공했습니까?

store에 state를 추가한다.

솔직히 store를 만드는 방법은 각 사람이므로 참고 정도로 봐주세요.
제 경우에는 store.js 하나로 관리하는 방법을 취하고 있습니다. 그 밖에 module를 파일마다 나누어 관리하는 방법도 있습니다만, 개인적으로 가독성이 좋지 않다고 생각했으므로 1개로 정리하고 있습니다.

store.js

const store = new Vuex.Store({
  modules: {
    common: {
      namespaced: true,
      state: {
        pageTitle: 'Home',
      },
      actions: {
        changePage({ commit }, title) {
          commit('cahgePageTitle', title);
        },
      },
      mutations: {
        cahgePageTitle(state, title) {
          const st = state;
          st.pageTitle = title;
        },
      },
      getters: {
        pageTitle(state) {
          const st = state;
          return st.pageTitle;
        },
      },
    },
// ----以下省略----
  }
})

export default store;

다음에 여기에서 설정한 state를 view로 취득합니다.
Header.vue 뭔가를 만들어도 좋았습니다만, 이번은 알기 쉽게 App.vue로 만듭니다.

App.vue

    <div id="header">
      {{pageTitle}}
    </div>

<script>
import { mapGetters } from 'vuex';

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      pageTitle:'common/pageTitle',
    }),
  },
};
</script>

mapGetters를 사용하여 state에서 pageTitle을 가져옵니다.
이제 store 값을 view로 가져올 수있었습니다.

vue-router에서 store에 액세스합니다.

일반적으로 this.$store와 같이 해도 vue-router에서 store에 액세스 할 수 없습니다.
하지만 하는 방법은 간단하고 Evan씨가 말하는 대로 store.js를 import하면 됩니다.

다음에 afterEach의 내용도 바꾸어 봅시다.
이번 설계상 store의 값을 다시 쓰는 것은 mutations이므로 그것에 액세스하고 있는 action의 changePage에 dispatch해 줍니다.

router.js

import store from './store';

// ----省略----

router.afterEach((to,from) =>{
  if (to.meta && to.meta.title) {
    store.dispatch('common/changePage', to.meta.title)
  }
})

이상으로 종료입니다.
실제로 움직였습니까?

요약

전이시의 처리는 각각에 쓰지 말고, router.js 한 곳에서 정리하도록 합시다.
그럼 좋은 Vue.js 생활