v3.x のドキュメントを見たい場合はこちら

ガイド

v2.x 以前のドキュメントです。 v3.x のドキュメントを見たい場合はこちら

ルーティング

最終更新日: 2017年9月3日

公式ルータ

ほとんどのシングルページアプリケーション (SPA: single page application) を作成する場合、公式にサポートされている vue-router ライブラリ を使うことをお勧めします。さらに詳しい内容は vue-router のドキュメントを参照してください。

スクラッチからの単純なルーティング

とてもシンプルなルーティングを必要としていて、フル機能のルータライブラリを使用したくない場合は、このようにページレベルのコンポーネントで動的に描画することができます。

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

HTML5の History API と組み合わせることで、とても基本ですが、完全に機能するクライアント側のルータを構築することができます。実際に確認するには サンプル を取得してください。

サードパーティのルータとの統合

もし、Page.js や Director の様なサードパーティのルータを使いたい場合、統合するのは 非常に簡単 です。ここに Page.js を使った サンプル があります。

← プロダクション環境への配信 状態管理 →
間違いを見つけた、またはドキュメントに貢献したいですか？ GitHub で編集しましょう！ このサイトは Netlify でホストされています。