【VueによるSPA構築】ページ遷移アニメを実装する方法｜たのしいWeb
Vue CLIで構築したシングルページアプリケーションの雛形に、ページが変わる時にフェードイン/フェードアウトするようなトランジションアニメーションをつけたいんだけど、どうやってやればいいんだろう？ついでに、色々なトランジションアニメーションの実装方法を知りたいな。 こういった要望に答えます。 筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。 この記事はVue CLIを使った開発環境構築方法で作ったVueアプリケーションの雛形を元に解説していますので、まずは雛形を作成してから読み進めていただくと分かりやすいと思います。
動的ルートマッチング | 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 両方とも同じルートにマッチします。 動的セグメントはコロン : を使って表されます。ルートがマッチした時、この動的セグメントの値は全てのコンポー
JavaScript｜「含むか」の判定(配列, 文字列) - わくわくBank
「含むか」の判定処理は様々な方法で実装できます。includes、indexOf、test、match、searchなど利用できます。どれを利用したら良いか考えてみます。 const arr = [40, 30, 20, 10] if (arr.indexOf(20) !== -1) { console.log(arr.indexOf(20)) console.log('存在します') } if (arr.indexOf(50) === -1) { console.log(arr.indexOf(50)) console.log('存在しません') } console.log('----------------------------------------') if (arr.includes(20)) { console.log(arr.includes(20)) console.lo
How to get the previous URL in JavaScript?
Is there any way to get the previous URL in JavaScript? Something like this: alert("previous url is: " + window.history.previous.href); Is there something like that? Or should I just store it in a cookie? I only need to know so I can do transitions from the previous URL to the current URL without anchors and all that.
【Vue.js】ナビゲーションガード(beforeRouteEnter)を使って前のページのURLを取得する - Qiita
やりたいこと VueRouterで遷移するページで、一つ前のページのURLなどを取得して、 それに応じてページ内のパーツの表示非表示を切り替えたい。 beforeRouteEnterで取得しようとしたが・・・ 今回はあるComponentのみで、前のURLが必要だったので、VueRouterのナビゲーションガードのbeforeRouteEnterを使用してみました。 公式のドキュメント <template> <div> // 前のURLに応じてここの表示非表示を切り替えたい <div v-if="prevRoute.name =='hoge'"></div> </div> </template> <script> export default { data() { return { prevRoute: null, }; }, created() { }, beforeRouteEnter
イヌでもわかるJavaScript講座 - リファラ(referrer)
リンク元がお友達のページであれば、「○×さんのホームページからお越しですね。ありがとうございます。」と表示してみたら面白いかもしれません。 リスト <script type="text/javascript"><!-- if (document.referrer.length !=0 ){ myRef = document.referrer; if ( myRef.indexOf( "http://www.google.co.jp" ) == 0 ){ document.write( "Google検索からお越しですね！ ありがとうございます！" ); }else if ( myRef == "http://www.red.oit-net.jp/tatsuya/java/index.htm" ){ document.write( "イヌでもわかるJavaScript講座 目次 から いらっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】 現在のパス(URL)を取得する 【Vue-Router】 - Qiita
vue-router 現在のパスによってスタイルを変更する
Engadget | Technology News & Reviews