vue-routerの検索結果1 - 18 件 / 18件

• あとで読む

  Vue Router Next - 意外と語られない Vue 3 時代のルーティング / Vue Router Next - Routing in the Vue 3 that is not talked about unexpectedly

  • 41 users
  • speakerdeck.com/line_developers
  • テクノロジー
  • 2020/09/18

  生田望 （LINE株式会社） 「UIT meetup vol.10 『Vue 三昧』」での発表資料です https://uit.connpass.com/event/187267/

  • vue
  • あとで読む
  • slide
  • 技術
  • vue-router

  
• あとで読む

  Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介

  • 41 users
  • zenn.dev/comm_vue_nuxt
  • テクノロジー
  • 2024/08/13

  Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で

  • development
  • あとで読む

  
• あとで読む

  Vue Routerの遷移の流れをコードリーディングしたまとめ - Link and Motivation Developers' Blog

  • 6 users
  • link-and-motivation.hatenablog.com
  • テクノロジー
  • 2022/11/07

  リンクアンドモチベーションでエンジニアをしている野田です。 今回は、フロントエンド開発で利用しているVue Routerという画面遷移ライブラリが思った通りに動作しない事象があり、原因を探る中でVue Router内部のコードリーディングを行ったのでそのまとめを記載させていただきます。 背景 弊社プロダクトのフロントエンド開発を行う中で、データを保存しないまま画面遷移した場合に注意を促すモーダル（添付画像的なもの）の実装を行う必要がありました。 その際にキャンセルした場合は編集画面に留まり、問題ない場合は画面遷移をそのままさせる必要があったので、Vue RouterのBeforeRouteLeaveというナビゲーションガードでフックしてその分岐を実現しようとしました。 ところがモーダル表示後遷移する場合に、1回目は問題なく遷移できるのですが2回目は遷移しないという現象が起こっていました。特

  
• あとで読む

  Vue.jsでページを切り替える「Vue Router」の利用法を解説！ TypeScriptの型定義とともに活用しよう

  • 6 users
  • codezine.jp
  • テクノロジー
  • 2023/04/20

  本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsのコンポーネントについて説明しました。今回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載でこれまで扱ってきたサンプルは、基本的に1ページだけを表示するものでしたが、実際のWebページでは、URLによって異なる内容のページを切り替え表示します。Vu

  • Pocket

  

vue-routerの関連エントリー

• 

  エアコンのドレン水で鉢植えに自動水やりするシステム、一見衛生的にアウトな気がするが実際にドレン水栽培をやっている先輩たちの成果が続々と集まる

  93 users
• 

  最近のClaude Codeの使い方

  256 users
• 

  事業価値と Engineering

  141 users
• 

  GPT-5 プロンプトエンジニアリングガイドを読み解き、より良いコーディング支援を受ける - tomoima525's blog

  209 users
• 

  ObsidianとSupermemory MCPをつなぐ知識管理ワークフロー

  79 users
• 

  Microsoftから登場したVibeVoice凄すぎ

  66 users
• 

  AI駆動開発ツール：コーディングエージェントとTextToAppまとめ（2025年9月版）

  22 users
• 

  リクルート、新卒エンジニア研修資料17種類を公開　「モダンフロントエンド開発研修」「大規模言語モデルことはじめ」など

  253 users
• 

  fetch() では Host ヘッダーを設定できないし話はそこまで単純じゃない - Object.create(null)

  23 users
• 

  AI駆動開発ツール：コーディングアシスタントツールまとめ（2025年9月版）

  14 users
• あとで読む

  Vue router を使った時の GitHub Pages での 404 対策 - Qiita

  • 5 users
  • qiita.com/naca_nyan
  • テクノロジー
  • 2021/12/12

  どんな問題？ 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

  • Article

  
• あとで読む

  【Vue2】 Vue Routerの機能の整理 - Qiita

  • 4 users
  • qiita.com/JetNel0
  • テクノロジー
  • 2021/05/16

  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' } ] })

  
• あとで読む

  【Vue.js】Vue Router上でコンポーネントに値を渡す前に非同期処理の完了を待たせる

  • 4 users
  • cpoint-lab.co.jp
  • テクノロジー
  • 2023/10/22

  【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

  
• あとで読む

  【Nuxt, Vue, Vue Router】SPA でページ内の「戻る」ボタンとブラウザバックの挙動を合わせるための Tips（history 操作や popstate イベント、Promise を使用）

  • 4 users
  • blog.maxpace.tech
  • テクノロジー
  • 2021/10/26

  こんにちは、mackey です。 Nuxt.js や Vue.js を使用して SPA（Single Page Application）を作成する時に、 ページ内に実装した「戻る」ボタンと、ブラウザの戻るボタンの挙動が違う動きになってしまった時に使える、コアな Tips の紹介です。 この後紹介するようなページを作成する際に、とある構成で実装してみたところ、ページ内の「戻る」ボタンとブラウザバックの挙動を合わせるための処理が必要になりました。 ページコンポーネントを使って Vue Router によるページ遷移を行うようにすればこのような面倒な自体にはならずに済みますが、 History API を操作したり、ブラウザバック時のイベントや、Nuxt.js ・ Vue.js でのプログラム的なイベントの処理方法など、様々な面で勉強になったのでまとめてみました。 ページ内に実装した「戻る」ボタ

  
• あとで読む

  【Vue.js】vue-routerの動的URLでパラメータが変わった時、ライフサイクルフックは呼ばれないので注意 - Qiita

  • 3 users
  • qiita.com/yuta-katayama-23
  • テクノロジー
  • 2021/07/04

  import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue'; import Users from './views/User.vue'; Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/users/:id', component: Users } ] });

  
• あとで読む

  【Vue.Router】404ページへの遷移 - Qiita

  • 3 users
  • qiita.com/Quest_love33
  • テクノロジー
  • 2021/12/14

  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: NotFound //No

  • Article

  
• あとで読む

  GitHub - posva/unplugin-vue-router: Next Generation file based typed routing for Vue Router

  • 3 users
  • github.com/posva
  • テクノロジー
  • 2022/07/04

  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でUncaught(in promise) NavigationDuplicated のエラー at softelメモ

  • 3 users
  • www.softel.co.jp
  • テクノロジー
  • 2020/12/31

  問題 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を戻すようになっ

  
• あとで読む

  Vue Routerを使ってURLを動的に制御する方法

  • 3 users
  • macareux.co.jp
  • テクノロジー
  • 2022/09/21

  Vue Routerは、Vue.jsの公式ルータで、ルーティング制御をするためのさまざまな機能を利用することができます。

  • vue.js

  
• あとで読む

  Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)

  • 3 users
  • www.udemy.com
  • テクノロジー
  • 2020/09/19

  Another Vue.js 3 from zero to hero course - kind of. This course is for developers who want to move fast. We cover the traditional way of building Vue apps - the Options API - as well as the the new Composition API, and even see how you can mix and match them together. There are 8 modules; 4 introduce fundamental skills (Options API; Composition API; Vuex and Vue Router). The remaining four module

  • APIエコノミー
  • Vue.js
  • ネットワーク
  • techfeed
  • あとで読む

  
• あとで読む

  [Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する - Qiita

  • 3 users
  • qiita.com/kozzzz
  • テクノロジー
  • 2020/09/05

  vue-routerのhashモードとhistoryモードをざっくりと理解することが目的の記事です。 そもそもルーターはなんで必要？SPAについて少し補足 これはVueに限った話ではないですが、ルーターの役割は（簡単に）SPAを実現するためと言っても良いでしょう。 SPAとは 最初のリクエストで受け取ったHTML（index.html）を使いまわし、URLに対応したページをJavaScriptで動的に作成する方式です。 MPAとは SPA対してMPA（マルチページアプリケーション）と呼ばれたりします。 URLに対応したHTMLをサーバーが返してくれる従来の方式です。 hashモード hashモードではURLが下記のように表示されます。 http://localhost:8080/#/hoge ルーティングにURL hashを使用しています。 この形式で入力されるとvue-routerは、

  
• あとで読む

  Vue Router Data Loaders の rfc を読む

  • 3 users
  • zenn.dev/sa2knight
  • テクノロジー
  • 2022/10/19

  背景 データフェッチングにおける銀の弾丸はない。 データフェッチングの戦略や手法には各アプリケーションの UX やアーキテクチャに依存するため、唯一の正解はないので。 ただし、VueRouter における標準的なデータフェッチング改善の仕組みが用意できれば、データフェッチにおける複雑性の低減と柔軟性の向上を実現するプラクティスになるのではと考え提案している。 個人の感想 わかりみが深い。ページコンポーネントにおいてデータフェッチをどのタイミングでどう行うかがにデファクトスタンダードがないし、割と自由奔放に実装されちゃうよね。

  
• あとで読む

  Github pagesでハッシュなしSPAを作る[Vue.js + vue-router] - Qiita

  • 3 users
  • qiita.com/hiyoko3
  • テクノロジー
  • 2021/02/21

  Results 私のポートフォリオページでこれを実現しています． Demo Introduction Single Page Application(SPA)はファイルの実体が存在していないため，ブラウザをリロードすると404を返されてしまいます． この問題を解決するためSPAでは基本#/を用いているのですが... #/ <- こいつすごい気になる！ SPA を構築している殆どの開発者がこう思ったのではないでしょうか？ このハッシュを消す方法はいくつか存在します． ApacheやNode.js，Nginxなどは公式を参照すると良いかと思います． しかしながら，この中にはGithub pagesについては記載されていませんでした． 本記事はGithub pagesでもハッシュなしのSPAを実装する方法をご紹介します． How to ここを参考にプログラムを修正しました． SPAに必要なのは遷

  
• あとで読む

  シームレスな画面遷移アニメーションの Vue Router を使った実装パターン - Katashin .info

  • 3 users
  • katashin.info
  • テクノロジー
  • 2023/09/19

  2023年9月19日アニメーション,Vue,Vue Router以下のようにシームレスな（繋ぎ目のない）画面遷移を実装するとしたら、どのように実装しますか？それぞれのカードをクリックするとカードが拡大され、そのコンテンツ全体が見れるようになります。 この実装はカード一覧ページと、コンテンツ全体が見れるページの2ページで構成されていて、画面遷移の処理を工夫することで、シームレスな見せ方をしています。 シームレスな画面遷移は、要素同士の関連性を強調したり、アプリへの没入感を高めるなどのメリットがありますが、実装難易度が高く、コードのメンテナビリティが下がりやすいというデメリットもあります。 本記事では、このようなシームレスな画面遷移を実装する難しさを説明してから、Vue.js を使った実際のコードを交えながらその実装方法について解説します。 シームレスな画面遷移アニメーションの難しさ #シーム

  • css
  • JavaScript