Vue3 ルートジャンプ

Vue 3でVue Routerを使用してリダイレクトするための基本的な手順は次のとおりです。

1. router-link

• paramsで渡されたパラメータはリダイレクト先のURLに表示されません。一方、queryで渡されたパラメータはURLに表示されます。paramsで渡されたパラメータはURLに表示されないため、リダイレクト時にはparamsメソッドでパラメータを渡すことをお勧めします。

• params と query で渡されたパラメータを取得します。

import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params）
console.log(route.query）

ルーター

• 使用方法

import { useRouter } from 'vue-router';
const bar = useRouter();
bar.push({
    'path': '/home',
    'query': {
        'id': '123',
        'value': '詳細にジャンプする
    }
});
bar.push({
    'name': '/home',
    'obj': {
        'id': '123',
        'value': '詳細にジャンプする
    }
});
bar.push({
    'name': '/home',
    'query': {
        'id': '123',
        'value': '詳細にジャンプする
    }
});

• パラメータの取得

import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params）
console.log(route.query）

• その他、よく使用されるvue-routerメソッド
• push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): 新しいルートに移動します。 クリックするのと同様です。 文字列パスまたはアドレスをパラメータとして記述したオブジェクトを使用できます。
• go(n: number): ブラウザの履歴を n ステップ前後に移動します。ブラウザの「進む」と「戻る」ボタンと同様です。
• back(): 1ページ前に移動します。go(-1) と同等です。
• forward(): 1ページ先に移動します。go(1) と同等です。
• getCurrentLocation(): 現在のルートのアドレス情報オブジェクトを取得します。
• beforeEach(guard: NavigationGuard): ナビゲーション開始前に実行されるグローバルガードを登録します。 例えば、ルート権限の制御に使用できます。
• beforeResolve(guard: NavigationGuard): ナビゲーションが確定する前に、ただしbeforeEachガードの後に実行されるグローバルガードを登録します。
• afterEach(hook: => any): ナビゲーションが完了した後に実行されるグローバルなポストフックを登録します。成功または失敗に関係なく実行されます。
• removeRoute(name: string): 登録済みのルートレコードを動的に削除します。
• hasRoute(name: string): ルートレコードが登録されているかどうかを確認します。
getRoutes(): 現在登録されているルート構成を取得します。

router.resolve() は新しいウィンドウを開き、リダイレクトします。

 import { useRouter } from 'vue-router';
const router = useRouter();
const goDeatil=()=> {
 let temp = router.resolve({
 path: '/detail',
 });
 window.open(temp.href, '_blank');
 }
const goDeatil=()=> {
 let temp = router.resolve({
 name: 'detail',
 });
 window.open(temp.href, '_blank');
 }