Vue.js / JSON から情報を引っ張ってくる その9

f:id:jotaki:20190212100544p:plain

やること

HTML5 History モード

今回は HTML5 History モード | Vue Router を使用してみた。
/router/index.jsmode: 'history' の指定を追加。
参考:Vue.js - vue-routerの、hashモードと、historyモードの役割の違いについて|teratail

export default new Router({
  mode: 'history',
  routes: [
    {
      path: "/",
      name: 'top',
      component: top
    },
    {
      path: "/about",
      name: 'about',
      component: about
    }
  ]
})

vue-router 使用時の現在地ナビ(カレント表示)

現在いるページのナビゲーション <a> 要素にはデフォルトで .router-link-exact-active というクラスが付与されるが、それを変更したい場合

<ul>
  <li><router-link to="/" exact-active-class="is-selected">Top</router-link></li>
  <li><router-link to="/about" exact-active-class="is-selected">About</router-link></li>
</ul>

のように exact-active-class="is-selected" としてあげる

参考:API Reference | Vue Router
参考:Vuejs vue-routerはアクティブなリンクに自動でクラスを振ってくれる - Qiita

まとめ

Github

  • カテゴリー選択した際のフィルターは、配列取得してfor文でマッチする投稿を出し分けしていますが、filter などを使えばもっとスマートに書けそう。

  • 各投稿をカテゴリーごとに出力する箇所、結局 $emitprops を使わずに カテゴリー一覧と投稿出力のコンポーネントを分けるのは断念した。そもそもできるものなのかも不明ですが、このあたりも自由にできたら楽しいだろうなと思う。

  • やっとサイトっぽくなったのはよかったかなと思います。
次回やること