Vue3: vue-router の高度な使用法

1.ルートリダイレクション

• ルーティング リダイレクトとは、ユーザーがアドレス A にアクセスすると、特定のコンポーネント ページを表示するためにアドレス C に強制的にジャンプすることを指します。ルーティング ルールのリダイレクト属性を通じて新しいルーティング アドレスを指定すると、ルートのリダイレクトを簡単に設定できます。
  

2. ルートのハイライト表示

• アクティブなルーティング リンクは、次の 2 つの方法で強調表示できます。
  ① デフォルトの強調表示クラスを使用する
  ② ルートの強調表示クラスをカスタマイズする

2.1 デフォルトの強調表示されたクラス

• アクティブ化されたルーター リンクには、デフォルトで router-link-active というクラス名が適用されます。開発者は、この名前セレクターを使用して、アクティブなルート リンクの強調表示スタイルを設定できます。
  

2.2 カスタムルートハイライトクラスクラス

• ルーティング インスタンス オブジェクトを作成するとき、開発者は、linkActiveClass プロパティに基づいてルーティング リンクがアクティブ化されたときに適用されるクラス名をカスタマイズできます。
  

.router-active {
  background-color: blue;
  color: white;
  font-weight: bold;
}

3. ネストされたルーティング

• ルーティングによるコンポーネントのネストされた表示は、ネストされたルーティングと呼ばれます。
  
  
  ① サブルーティング リンクとサブルーティング プレースホルダーを宣言します
  。 ② 親ルーティング ルールで、子属性のネストを通じてサブルーティング ルールを宣言します。

// router.js
import { createRouter, createWebHashHistory } from 'vue-router'

import Home from './MyHome.vue'
import Movie from './MyMovie.vue'
import About from './MyAbout.vue'

import Tab1 from './tabs/MyTab1.vue'
import Tab2 from './tabs/MyTab2.vue'
import Tab3 from './tabs/MyTab3.vue'

// 创建路由对象
const ro