38elements.github.io - VueRouterメモ

VueRouterメモ

38elements.github.io Spined HTML

VueRouterメモ VueRouterメモ Document ルートコンポーネントにrouterを置く * urlの変更はoption.watch.$routes()でわかる * pathの設定例 * <router-view></router-view>にroutesに設定したcomponentが入る * 子ステートはchildrenに設定する * router.push(location, onComplete, onAbort), router.replace(location, onComplete, onAbort), router.replace(location, onComplete, onAbort) * locationは{name: “foo”, params: {bar: 1}}か{path: “/foo”, query: {bar: 1}}の形式 <router-link>はテンプレートでの遷移を記述する際に使用する   nameキーを指定することによってルーティングされるpathに名前をつけることができる * nameを使って1つのパスに複数のコンポーネントをルーティングする方法 * componentsにnameキーを置く  　 redirectには関数を渡して動的にパスを変更することができる * Navigation guards before(), after()のようなもの *   toもfromもルートオブジェクト next()を実行することを忘れない metaキーでルートオブジェクトにメタデータを付与することができる * Routeオブジェクト * コンポーネントではthis.$routeでアクセスする this.$route.query this.$route.params paramをpathに指定する際は以下の形式にする route.path = '/foo/:param/' 最後の/を付ける Routeのoption *   Routerオブジェクト * コンポーネントではthis.$routerでアクセスする router.app routerが所属しているVueオブジェクト router.currentRoute 現在のRouteオブジェクト   コンポーネントではthis.$routerをつかう aliasを使う redirectを使う pathに’‘を指定することができる   コンポーネントができた直後に実行したい処理はcomponent.beforeRouteEnter()内でnext((vm)=>{})に記述するかmounted metaを使用した認証の確認 * let using = new Vue({ router }).$mount('#application') Vue.jsメモ Vuexメモ vuelidateメモ ≪Swift Github Star Ranking at 2017/01/21 Main Vuexメモ≫