はてなブックマーク

# API リファレンス # <router-link> <router-link> はルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。対象とする location は to プロパティを使って指定します。デフォルトでは正しい href と共に <a> タグとして描画しますが、 tag プロパティを設定することも可能です。さらに、対象のルートがアクティブの時に、そのリンクは自動的にアクティブな CSS クラスが当てられます。 下記の理由により <router-link> はハードコードする <a href="..."> よりも好ましいです。 HTML5 history モードでも hash モードでも同じ方法で動作します。もしあなたがモードを切り替えたりする場合や、IE9 で hash モードにフォールバックする場合に、何も変更

コンポーネントで $route を使うとコンポーネントとルートの間に密結合が生まれ、コンポーネントが特定の URL でしか使用できないなど柔軟性が制限されます。 コンポーネントをルーターから分離するために props オプションを使います: $route に結合 const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [{ path: '/user/:id', component: User }] }) const User = { props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path:

パターンを使って同じコンポーネントにルートをマップする必要がしばしばあるでしょう。例えば、 User コンポーネントは全てのユーザーに対して描画されるべきであるが、それぞれ異なるユーザー ID を持つ場合などです。vue-router ではパスの中の動的なセグメントを使用して実現できます。 const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // コロンで始まる動的セグメント { path: '/user/:id', component: User } ] }) これで /user/foo や /user/bar などの URL 両方とも同じルートにマッチします。 動的セグメントはコロン : を使って表されます。ルートがマッチした時、この動的セグメントの値は全てのコンポー

宣言的なナビゲーションとしてアンカータグを作成する <router-link> がありますが、ルーターのインスタンスメソッドを使ったプログラムによる方法でもそれは可能です。 # router.push(location, onComplete?, onAbort?) 注意: Vue インスタンスの内部では、$router としてルーターインスタンスにアクセスできます。従って、this.$router.push で呼ぶことができます。 異なる URL へ遷移するときに router.push が使えます。このメソッドは history スタックに新しいエントリを追加します。それによってユーザーがブラウザの戻るボタンをクリックした時に前の URL に戻れるようになります。 このメソッドは <router-link> をクリックした時に内部的に呼ばれています。つまり <router-link :

Data Fetching ​Sometimes you need to fetch data from the server when a route is activated. For example, before rendering a user profile, you need to fetch the user's data from the server. We can achieve this in two different ways: Fetching After Navigation: perform the navigation first, and fetch data in the incoming component's lifecycle hook. Display a loading state while data is being fetched.

この名前が示すように、 vue-router によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。 パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない ということを覚えておいてください。それらの変更に対応するために $route オブジェクトを監視する、またはコンポーネント内ガード beforeRouteUpdate を使用するかの、どちらかができます。 # グローバルビフォーガード router.beforeEach を使ってグローバル before ガードを登録できます。 const router = new VueRouter({ ... }) router.before

クライアントサイドのルーティングを使っている時に、新しいルートに対してスクロールをトップへ移動させたいかもしれません、もしくは実際のページリロードがしているように history 要素のスクロールポジションを保持したいこともあるかもしれません。 vue-router ではこれらをさらによく実現できます。ルートナビゲーションにおけるスクロールの挙動を完全にカスタマイズすることができます。 注意: この機能は ブラウザが history.pushState をサポートしている場合のみ動作します。 ルーターインスタンスを作る時に、 scrollBehavior 関数を提供できます。 const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // 望みのポジションを返す } })

vue-router のデフォルトは hash モード です - 完全な URL を hash を使ってシミュレートし、 URL が変更された時にページのリロードが起きません。 その hash を取り除くために、ページのリロード無しに URL 遷移を実現する history.pushState API を利用したルーターの history モード を使うことができます。 const router = new VueRouter({ mode: 'history', routes: [...] }) history モードを使用する時は、URL は "普通" に見えます e.g. http://oursite.com/user/id。美しいですね! しかしながら一点問題があります。シングルページのクライアントサイドアプリケーションなので、適切なサーバーの設定をしないと、ユーザーがブラウザで直

Vue Router は Vue.js (opens new window) 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです: ネストされたルート/ビューマッピング モジュール式、コンポーネントベースのルータ構造 ルートパラメータ、クエリ、ワイルドカード Vue.js の transition 機能による、transition エフェクトの表示 細かいナビゲーションコントロール 自動で付与される active CSS クラス HTML5 history モードまたは hash モードと IE9 の互換性 カスタマイズ可能なスクロール動作 はじめに または 例 (opens new window) から試してください。 (README.md (opens new window)を参照してくだ

Vue Router は Vue.js (opens new window) 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです: ネストされたルート/ビューマッピング モジュール式、コンポーネントベースのルータ構造 ルートパラメータ、クエリ、ワイルドカード Vue.js の transition 機能による、transition エフェクトの表示 細かいナビゲーションコントロール 自動で付与される active CSS クラス HTML5 history モードまたは hash モードと IE9 の互換性 カスタマイズ可能なスクロール動作 はじめに または 例 (opens new window) から試してください。 (README.md (opens new window)を参照してくだ

Vue RouterThe official Router for Vue.js Expressive, configurable and convenient routing for Vue.js