vue-router 4 の使用例の詳しい説明

vue-router 4 の使用例の詳しい説明

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()
})

以前のモードは履歴に置き換えられ、そのオプションは次のように変更されます。

  • 履歴->WebHistory の作成
  • ハッシュ -> createWebHashHistory
  • 抽象 -> createMemoryHistory

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue でのルータービューコンポーネントの使用に関する詳細な説明
  • Vue3ルーティングVueRouter4を使用する簡単な例
  • Vue-Routerのインストールと使用方法の詳細な説明
  • vue3 で vue-router を使用するための完全な手順
  • Vue-routerルーティングの使い方
  • vue3.0 で Router を使用する方法をご存知ですか?

<<:  ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化

>>:  ウェブページを開いて数秒後に他のページにリダイレクトする

推薦する

Vue で @person 関数を実装する方法

この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

削除、切り捨て、ドロップの違いと選択方法

序文先週、同僚が私に尋ねました。「兄さん、MySQL にバグを見つけました。午後にディスクをクリーン...

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

mysql5.7.18 解凍バージョンで mysql サービスを起動します

mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...

Vue3コンポーネントの開発詳細

目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...

jQueryは従業員情報の追加と削除の機能を実装します

この記事では、従業員情報の追加と削除の機能を実装するためのjQueryの具体的なコードを参考までに共...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

MySQL 制約の超詳細な説明

目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...

JS で単一ファイルコンポーネントを実装する方法

目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

MySQL の行レベルロックの詳細な例

序文ロックは、複数のスレッドを実行するときにリソースへのアクセスを強制的に制限するために使用される同...

Vueデータ監視の原理の詳細な説明

目次1. はじめにII. 監視対象2.1 なぜオブジェクトを監視する必要があるのですか? 2.2 デ...

CSS は Apple のスムーズなスイッチ ボタン効果を模倣します

目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...

Linux で nohup ログ出力が大きすぎる問題の解決方法の詳細な説明

最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...

MySQL 8.0.18 ハッシュ結合は左/右結合をサポートしていません 左と右の結合の問題

MySQL 8.0.18 では、インデックスが作成されていないフィールドに適用でき、等価値の関連付け...