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の最適化、モバイルアプリケーションの最適化
>>: ウェブページを開いて数秒後に他のページにリダイレクトする
この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...
今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...
序文先週、同僚が私に尋ねました。「兄さん、MySQL にバグを見つけました。午後にディスクをクリーン...
居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...
mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...
目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...
この記事では、従業員情報の追加と削除の機能を実装するためのjQueryの具体的なコードを参考までに共...
目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...
目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...
目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
序文ロックは、複数のスレッドを実行するときにリソースへのアクセスを強制的に制限するために使用される同...
目次1. はじめにII. 監視対象2.1 なぜオブジェクトを監視する必要があるのですか? 2.2 デ...
目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...
最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...
MySQL 8.0.18 では、インデックスが作成されていないフィールドに適用でき、等価値の関連付け...