vue-router 4 の API のほとんどは変更されていませんが、vue3 ではプラグインとして存在するため、使用方法に若干の変更があります。次に、使い方を学びましょう。 1. インスタンスをインストールして作成するvue-routerの最新バージョンをインストールする vue-router@4 を npm でインストールします または yarn add vue-router@4 インストールが完了したら、package.jsonファイルでvue-routerのバージョンを確認できます。 「依存関係」: { "vue": "^3.2.16", "vue-ルーター": "4" }, 新しいルーター フォルダーと新しい index.js ファイルを作成します。 「vue-router」から createRouter、createWebHashHistory をインポートします。 定数ルート = [ { パス:''、 コンポーネント:()=>import("../views/login/index.vue") }, { パス:'/home', コンポーネント:()=>import("../views/home/index.vue") } ] const ルーター = createRouter({ 履歴:createWebHashHistory('/')、 ルート }) デフォルトルーターをエクスポートする 次に、main.js にルーターをインポートします。 'vue' から {createApp} をインポートします。 './App.vue' からアプリをインポートします。 「./router/index」からルーターをインポートします。 const app = createApp(App) app.use(ルーター) app.mount('#app') 注: 以前は、コンポーネントをコンポーネントにインポートするときに .vue サフィックスを省略できましたが、vue-router 4 ではサフィックスを省略できず、省略するとエラーが発生します。 2. vue-router4の新機能2.1 動的ルーティングaddRoute が動的にルートを追加する場合、次の 2 つの状況が考えられます。 //ルートを動的に追加します。デフォルトではルートに追加します。router.addRoute({ パス:'/my', 名前:'私の', コンポーネント:()=>import("../views/my/index.vue") }) //サブルートを動的に追加 router.addRoute('my',{ パス:'/info', コンポーネント:()=>import("../views/my/info.vue") }) 子ルートを追加する場合、最初の属性値は親ルートの name 属性値になります。 2.2、構成との組み合わせイベントでルーターを取得し、ルートジャンプなどの操作を実行します。 <テンプレート> <button @click="backToHome">ホームページへ移動</button> </テンプレート> <スクリプト> 「vue-router」から useRouter をインポートします。 エクスポートデフォルト{ 設定(){ 定数ルーター = useRouter() 戻る { ホームに戻る(){ ルータ.push("/") }, } } } </スクリプト> 操作する前に useRouter を通じてルートを取得します。現在のルートでの操作も可能です。以下は、route.query をリッスンする例です。 <テンプレート> <div>ルートの変更を監視する</div> </テンプレート> <スクリプト> 「vue-router」から useRouter,useRoute をインポートします。 "@vue/runtime-core" から {watch} をインポートします。 エクスポートデフォルト{ 設定(){ 定数ルート = useRoute() //route は変更を監視できるレスポンシブ オブジェクトです watch(()=>route.query,query=>{ console.log('最新',クエリ) }) } } </スクリプト> 3. ナビゲーションガードナビゲーション ガードは主に、リダイレクトまたはキャンセルによってナビゲーションを保護するために使用されます。ナビゲーションをルーティングに埋め込む方法は、グローバル、単一ルート、またはコンポーネント レベルなど、多数あります。 3.1 グローバルガードrouter.beforeEach((to,from,next)=>{ console.log('グローバルフロントガード'); }) router.afterEach((to,from)=>{ console.log('グローバルポストフック'); }) 以前と同じ、変更はありません。 3.2. 専用ルーターガードルータ.addRoute({ パス:'/my', 名前:'私の', コンポーネント:()=>import("../views/my/index.vue"), beforeEnter:(to,from)=>{ console.log('ルート排他ガード'); } }) 3.3. コンポーネント内のガードコンポーネント内のガードは以前使用されていたものと異なります。vue-router4 では、必要なプラグインを vue-router からインポートする必要があります。 <スクリプト> 「vue-router」から { onBeforeRouteLeave } をインポートします。 エクスポートデフォルト{ 設定(){ onnBeforeRouteLeave((to,from)=>{ const answer = window.confirm('本当に終了してもよろしいですか?') if(答え){ console.log('離れないでください'); 偽を返す } }) } } </スクリプト> 4. vue-router4 の破壊的な変更4.1. インスタンス作成方法//以前の作成方法 const router = new VueRouter({ }) 新しいVue({ ルーター、 レンダリング:h=>h(アプリ) }).$mount("#app") //vue-router4 作成メソッド import { createRouter } from "vue-router" const ルーター = createRouter({ }) createApp(App).use(router).mount("#app") 4.2. モード宣言の変更//前 const router = new VueRouter({ モード:"ハッシュ" }) // 新しい import { createRouter, createWebHashHistory } from "vue-router" const ルーター = createRouter({ 履歴:createWebHashHistory() }) 以前のモードは履歴に置き換えられ、そのオプションは次のように変更されます。
4.3. 基本属性が統合される基本オプションは createWebHistory に移動されました。 //前 const router = new VueRouter({ ベース:"/" }) // 新しい import { createRouter, createWebHashHistory } from "vue-router" const ルーター = createRouter({ 履歴:createWebHashHistory('/') }) 4.4. ワイルドカード*はキャンセルされます//前に{ パス:'*'、 コンポーネント:()=>import("../components/NotFound.vue") } //vue-ルーター4 { パス:'/:pathMatch(.*)*', コンポーネント:()=>import("../components/NotFound.vue") } // は正規表現です 4.5. onReady の代わりに isReady()// router.onReady(onSuccess, onError) の前 // 成功と失敗のコールバック //vue-router 4 router.isReady().then(()=>{ //成功}).catch(err=>{ //失敗}) 4.6. スクロール動作の変更const ルーター = createRouter({ scrollBehavior(to, from, savedPosition) { // 常に一番上までスクロールします return { top: 0, left:0 } }, }) // 以前の { x:0, y:0 } は { top: 0, left:0 } に置き換えられます 4.7. keep-alive と transition は router-view 内で使用する必要があります//<keep-alive> の前 <ルータービュー /> </キープアライブ> //vue-ルーター4 <ルータービュー v-slot="{コンポーネント}"> <キープアライブ> <コンポーネント:is="コンポーネント" /> </キープアライブ> </ルータービュー> 4.8. router-link はいくつかの属性を削除しました追加属性を削除する //<router-link to="child" append > の前に <router-link> にジャンプします //vue-ルーター4 <router-link :to="append( $route.path , 'child' )" append > <router-link> にジャンプ タグを削除しました //<router-link to="/" tag="span">ジャンプ</router-link>の前 //vue-ルーター4 <router-link to="/" カスタム> <span>ジャンプ</span> </ルーターリンク> イベントが削除されました 4.9. ルートの親属性が削除される4.10. pathToRegexpOptions オプションが削除され、他のコンテンツに置き換えられました4.11. ルートオプションは必須です4.12. 存在しない名前付きルートにリダイレクトする場合のエラー報告以前は、存在しないルートにジャンプすると、ページが空になり、ルートパスがリダイレクトされてしまうという不合理な状況があったため、Vue3 はエラーを報告していました。 4.13. 必須パラメータが不足している場合は例外が発生します4.14. 名前付きサブルートのパスが空の場合、/は追加されない以前に生成された URL には、「/dash/」のように、自動的に / が追加されます。副作用: リダイレクト オプションが設定されている子ルートに副作用があります。 あなたは vue-router 4 に関するこの記事を本当に理解していますか?記事はこれで終わりです。vue-router 4 に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化
>>: ウェブページを開いて数秒後に他のページにリダイレクトする
最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...
目次序文導入1. 作用機序2. 自然から3. 時計と計算の比較4. メソッドはデータロジックの関係を...
背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...
これがないと、ブラウザはページをレンダリングするときに Quirks モードを使用することがわかって...
学ぶ内容1. ソフトウェアのインストールとサーバーの設定。 2. (オプションですが、強くお勧めしま...
目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...
ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...
Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...
導入: Lambda Probe (旧称 Tomcat Probe) は、Apache Tomcat...
目次JSONとはなぜこの技術なのでしょうか? JSONの使い方- データ形式- メモ- JSには2つ...
目次1. ChildNodes属性のトラバーサル2. 要素シリーズ属性のトラバーサル以前は、chil...
この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...
1 はじめに PostgreSQL は、非常に充実した機能を備えたフリーソフトウェアのオブジェクトリ...
日々の開発経験と関連するオンライン情報に基づいて、アダプティブとレスポンシブの違いをシンプルでわかり...
序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...