タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介
Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で
Vue Routerの遷移の流れをコードリーディングしたまとめ - Link and Motivation Developers' Blog
リンクアンドモチベーションでエンジニアをしている野田です。 今回は、フロントエンド開発で利用しているVue Routerという画面遷移ライブラリが思った通りに動作しない事象があり、原因を探る中でVue Router内部のコードリーディングを行ったのでそのまとめを記載させていただきます。 背景 弊社プロダクトのフロントエンド開発を行う中で、データを保存しないまま画面遷移した場合に注意を促すモーダル（添付画像的なもの）の実装を行う必要がありました。 その際にキャンセルした場合は編集画面に留まり、問題ない場合は画面遷移をそのままさせる必要があったので、Vue RouterのBeforeRouteLeaveというナビゲーションガードでフックしてその分岐を実現しようとしました。 ところがモーダル表示後遷移する場合に、1回目は問題なく遷移できるのですが2回目は遷移しないという現象が起こっていました。特
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsのコンポーネントについて説明しました。今回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載でこれまで扱ってきたサンプルは、基本的に1ページだけを表示するものでしたが、実際のWebページでは、URLによって異なる内容のページを切り替え表示します。Vu
【Vue.js】Vue Router上でコンポーネントに値を渡す前に非同期処理の完了を待たせる 2020年2月6日 2023年10月23日 Vue Vue RouterはVue.jsの公式のルーターライブラリです。SPA（シングルページアプリケーション）的にVue.jsでサイトを構築するならまず出番があります。 紹介 ｜ Vue Router Vue Routerのルーティングでは次の様にパラメータを遷移先ページコンポーネントに渡します。 const options: RouterOptions = { mode: 'history', routes: [ { path: '/user/:id', name: 'userShow', component: Show, props: (route)=> { return {id: route.params.id}; }, }, ], }; e
どんな問題？ vue-router は SPA なので / 以外のページを直接叩きに行くと 404 する。 自分で nginx なんかでデプロイする場合は try_files /index.html とかで綺麗に解決するが、 GitHub Pages だとこの設定はできない（たぶん）。 普通に / 以外のページに行ったあと F5 するだけで 404 するのでけっこうキツい。 追記 GitHub Pages では SPA ではなくMPA にするほうがよさそう。 MPA にすれば複数 index.html ができるので以下の対策は必要ない。 対策方法 GitHub Pages は 404.html があると使ってくれるので、 404.html にスクリプトを仕込んでそこから /#/hoge/fuga/ へリダイレクトする（これで / がロードされる）。 / 側では Vue が動く前に URL
【Nuxt, Vue, Vue Router】SPA でページ内の「戻る」ボタンとブラウザバックの挙動を合わせるための Tips（history 操作や popstate イベント、Promise を使用）
こんにちは、mackey です。 Nuxt.js や Vue.js を使用して SPA（Single Page Application）を作成する時に、 ページ内に実装した「戻る」ボタンと、ブラウザの戻るボタンの挙動が違う動きになってしまった時に使える、コアな Tips の紹介です。 この後紹介するようなページを作成する際に、とある構成で実装してみたところ、ページ内の「戻る」ボタンとブラウザバックの挙動を合わせるための処理が必要になりました。 ページコンポーネントを使って Vue Router によるページ遷移を行うようにすればこのような面倒な自体にはならずに済みますが、 History API を操作したり、ブラウザバック時のイベントや、Nuxt.js ・ Vue.js でのプログラム的なイベントの処理方法など、様々な面で勉強になったのでまとめてみました。 ページ内に実装した「戻る」ボタ
【Vue.js】vue-routerの動的URLでパラメータが変わった時、ライフサイクルフックは呼ばれないので注意 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
import Vue from 'vue'; import Router from 'vue-router' import Home from '/views/Home.vue' import About from '/views/About.vue' Vue.use(Router) // プラグイン（どこでも使える機能）を適用するために記載 export default new Router({ routes:[ { path:'/', // URL component:'Home' // 上記URLのときに表示するコンポーネント }, { path: '/about', component:'About' } ] })
404ページへの遷移 urlに存在しないページへのpathをリクエストした場合の404ページの表示方法 環境 @vue/cli 4.5.12 手順 ルーテイングを管理するrouter/index.jsで以下のように設定。 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' //NotFoundコンポーネントをimport import NotFound from '@/someDir/NotFound.vue' Vue.use(VueRouter) const routes = [ { path: '*', //設定したurlにいずれもマッチしない場合 // redirect: '/', ※redirectオプションは任意で設定 component: No
vue-routerでUncaught(in promise) NavigationDuplicated のエラー at softelメモ
問題 vue-routerで画面遷移しようとしたら、エラーが出ます。 router.push('/hoge') router.push('/hoge') Uncaught (in promise) e {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/hoge") is not allowed", stack: "Error ...（略） 答え 現在すでに /hoge にいる状態で、 /hoge に移動しようとするとエラーになる。 router.push、router.replace は、ナビゲーションの成功時と失敗時のコールバックを引数で指定することができ、3.1以降は、コールバックが省略されると、Promiseを戻すようになっ
GitHub - posva/unplugin-vue-router: Next Generation file based typed routing for Vue Router
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vue Routerを使ってURLを動的に制御する方法
Vue Routerは、Vue.jsの公式ルータで、ルーティング制御をするためのさまざまな機能を利用することができます。
背景 データフェッチングにおける銀の弾丸はない。 データフェッチングの戦略や手法には各アプリケーションの UX やアーキテクチャに依存するため、唯一の正解はないので。 ただし、VueRouter における標準的なデータフェッチング改善の仕組みが用意できれば、データフェッチにおける複雑性の低減と柔軟性の向上を実現するプラクティスになるのではと考え提案している。 個人の感想 わかりみが深い。ページコンポーネントにおいてデータフェッチをどのタイミングでどう行うかがにデファクトスタンダードがないし、割と自由奔放に実装されちゃうよね。
2023年9月19日アニメーション,Vue,Vue Router以下のようにシームレスな（繋ぎ目のない）画面遷移を実装するとしたら、どのように実装しますか？それぞれのカードをクリックするとカードが拡大され、そのコンテンツ全体が見れるようになります。 この実装はカード一覧ページと、コンテンツ全体が見れるページの2ページで構成されていて、画面遷移の処理を工夫することで、シームレスな見せ方をしています。 シームレスな画面遷移は、要素同士の関連性を強調したり、アプリへの没入感を高めるなどのメリットがありますが、実装難易度が高く、コードのメンテナビリティが下がりやすいというデメリットもあります。 本記事では、このようなシームレスな画面遷移を実装する難しさを説明してから、Vue.js を使った実際のコードを交えながらその実装方法について解説します。 シームレスな画面遷移アニメーションの難しさ #シーム
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsでページを切り替える「Vue Router」の利用法を解説！ TypeScriptの型定義とともに活用しよう
【Vue.js】Vue Router上でコンポーネントに値を渡す前に非同期処理の完了を待たせる
Vue router を使った時の GitHub Pages での 404 対策 - Qiita
【Vue2】 Vue Routerの機能の整理 - Qiita
【Vue.Router】404ページへの遷移 - Qiita
Vue Router Data Loaders の rfc を読む
シームレスな画面遷移アニメーションの Vue Router を使った実装パターン - Katashin .info
www.arabnews.jp
www.smartnews.com
togetter.com
www.youtube.com
blog.itokoichi.com
anond.hatelabo.jp