Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
HTML5 History モード | Vue Router
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でbackwardかforwardかを判定する - Qiita
new Vue({ el: '#app', router, template: ` <div class="page"> <!-- $data.transitionNameに入っている名前でクラスが付与される --> <transition :name="$data.transitionName"> <router-view class="view" /> </transition> </div> `, data() { return { transitionName: 'forward' }; }, created() { // beforeEachでアニメーションする名前を決める this.$router.beforeEach((to, from, next) => { // forwardかbackwardか判定して、どっちかを入れる this.$data.transitionNam
Vue-Routerのナビゲーションガードを使ってみる - Qiita
Vue-Routerのモードはhashを想定しています。 Vue-router Vue-RouterはVue.jsでSPAを作る際につかいます。 ナビゲーションガード 画面にルーティングされる前にパラメータのバリデーションをして、アクセスのガードできます。 イベントの起きる順番と書き方 主にガードする場所は以下の4箇所です グローバルbeforeEach ルート単位beforeEnter コンポーネント単位beforeRouteEnter コンポーネント単位beforeRouteUpdate import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const TestComponent = { // アクセスさせない画面を持つコンポーネント render: function(h) { return h
ナビゲーションガード | Vue Router
この名前が示すように、 vue-router によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。 パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない ということを覚えておいてください。それらの変更に対応するために $route オブジェクトを監視する、またはコンポーネント内ガード beforeRouteUpdate を使用するかの、どちらかができます。 # グローバルビフォーガード router.beforeEach を使ってグローバル before ガードを登録できます。 const router = new VueRouter({ ... }) router.before
nuxtでナビゲーションガード時、リダイレクトしてもlayoutが変わらない問題 - Qiita
export default ({app,redirect}) => { app.router.beforeEach(async (to,from,next)=>{ if( /* 非認証ページ */ ) { next(); } else if( /* 別途ストアの中に認証用データがないとき */ ){ redirect('/login'); } else { const auth = await なんらかの非同期メソッド(); if( /* なんらかの非同期メソッドがオッケーだった時 */ ){ next(); } else { redirect('/login'); } } }) } リダイレクト後のページのlayoutが遷移前のPageComponentのlayoutのママだったんですね。 Vue-devtoolで見てもlayoutそのまま。 これも、universalモードで、直接ア
動的ルートマッチング | Vue Router
パターンを使って同じコンポーネントにルートをマップする必要がしばしばあるでしょう。例えば、 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 両方とも同じルートにマッチします。 動的セグメントはコロン : を使って表されます。ルートがマッチした時、この動的セグメントの値は全てのコンポー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kawamataryo/vue-sample-blog: headlessCMS、vue、apolloのsample blog
5分でvueのアプリを作りfirebaseにhostingする - Qiita
nuxt.jsのviewでパスパラメータを使いたいけど、ドキュメント読んでもよくわからなかった - Qiita