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の最適化、モバイルアプリケーションの最適化

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

推薦する

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...

Vue.js の watch メソッドと computed メソッドの違いの詳細な例

目次序文導入1. 作用機序2. 自然から3. 時計と計算の比較4. メソッドはデータロジックの関係を...

MySQL Innodb ストレージ構造と Null 値の保存の詳細な説明

背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...

DOCTYPE HTMLを使用する理由

これがないと、ブラウザはページをレンダリングするときに Quirks モードを使用することがわかって...

MySQLの始め方から諦め方まで徹底解説 - インストール

学ぶ内容1. ソフトウェアのインストールとサーバーの設定。 2. (オプションですが、強くお勧めしま...

Clickhouse Docker クラスターの展開と構成を例を使って説明します

目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...

コード例を通してページ置換アルゴリズムの原理を理解する

ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...

3分でUbuntu 16.04を初期化し、Java、Maven、Docker環境をデプロイする

Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...

LambdaProbe を使用して Tomcat を監視する方法

導入: Lambda Probe (旧称 Tomcat Probe) は、Apache Tomcat...

jsonファイルの書き方の詳細説明

目次JSONとはなぜこの技術なのでしょうか? JSONの使い方- データ形式- メモ- JSには2つ...

JavaScript の新しい要素トラバーサルプロパティを使用して子要素をトラバースする方法を学びます

目次1. ChildNodes属性のトラバーサル2. 要素シリーズ属性のトラバーサル以前は、chil...

Vue 日付時刻ピッカーコンポーネントの使い方の詳細な説明

この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...

Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する

1 はじめに PostgreSQL は、非常に充実した機能を備えたフリーソフトウェアのオブジェクトリ...

適応分析と応答分析の違いを専門用語で詳しく説明

日々の開発経験と関連するオンライン情報に基づいて、アダプティブとレスポンシブの違いをシンプルでわかり...

Docker+keepalived+nginx を使用してマスタースレーブホットスタンバイを実装する方法の例

序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...