nameでルーティングの名前を指定する。以下ではusers/1/profileの名前を設定している。 routes: [ { path: "/users/:id", component: Users, childeren: [{ path: "profile", component: UsersProfile, name: "users-id-profile" // ここ }] } ] router-link…

childrenでネストするルーティングを指定する。 以下の記述により、/users/1/postsなどが定義される。 routes: [ { path: "/", component: Home }, { path: "/users/:id", component: Users, props: true, children: [ // ここ { path: "posts", component: …

template内で$route.paramsからURL内の動的な値を参照できる。 <template> <h1>User No. {{ $route.params.id }}</h1> $route ナビゲーションの情報を得るときに使う $router ナビゲーションするときに使う ルート(route)コンポーネントの再利用性を損なわないためのpropsオプ</template>…

active-class属性：そのrouter-linkがアクティブになっている時に有効になるクラス。以下はフォントサイズを変更している。 <template> <router-link active-class="link--active" exact to="/" >Home</router-link> <style scoped> .link--active { font-size: 20px; } ※包含的なマッチ：全てのurlには/が含まれるため、常に/のrouter-linkがアクティブにな</template>…

URLとコンポーネントを紐付けルーティングする。 インストール % yarn add vue-router ルーターを設定 // router.js // vue-routerをインポート import Vue from 'vue' import Router from 'vue-router' // 'Router'として使う // ルートコンポーネントをす…

同じコードを使い回す。プラグインを作りたい時とか。 ※コンポーネントとミックスインのコードが被ったら、コンポーネントが優先される ※ライフサイクルフックの内容に関してはミックスイン→コンポーネントの順で実行される // event.js export const event …

テキストをフォーマットする。methodと同じで再描画されるたびに実行される。 グローバル登録 <h2>{{ title | upperCase }}</h2> Vue.filter("upperCase", function(value) { return value.toUpperCase(); }) ローカル登録 <h2>{{ title | upperCase | lowerCase }}</h2> // 連…