Vue プロジェクトで addRoutes を使用する際の問題の解決策

序文

AddRoutes 公式紹介:

関数シグネチャ:

router.addRoutes(ルート: Array<RouteConfig>)

ルーティング ルールを動的に追加します。引数は、ルート オプションに準拠した配列である必要があります。

ここ2日間、vueバックエンドの権限管理システムに取り組んでいたところ、vueが提供するaddRouteを使用してルートを追加した後、2つのバグが発生することがわかりました。解決方法を見てみましょう〜

1. 404 ページ

1. 原因

vueが提供するaddRoutesを使用して動的ルーティングを追加した後、404ページのルーティング設定がルーティングの最後に表示されなくなりました。

2. 解決策

404ページのルートを動的ルートの最後に追加します

コードは次のとおりです（例）：

// xxx => ユーザーが持つ動的ルート配列 xxx.push({ path: '*', redirect: '/404', hidden: true })

// ルーティング設定を動的に追加する router.addRoutes(xxx)

2.白い画面を更新する

1. 原因

更新時にダイナミックルーティングが完全にロードされない

2. 解決策

ルートを追加したら、ページに入ります

コードは次のとおりです（例）：

if (ユーザーの動的ルーティングがロードされていない場合) {
	//更新時に発生する白い画面のバグを解決する
  次（{
    ...to, // next({ ...to }) の目的は、ページに入る前にルートが追加されていることを確認することです (再入と理解できます)
    replace: true // 一度だけ再入力し、重複した履歴を保持しない})
} それ以外 {
	次（）
}

3. ルーティングの重複

1. 原因

ルート設定は router.addRoutes(xxx) で追加されます。ログアウトしてもクリアされません。再度ログインすると再度追加されるため、重複が発生します。

2. 解決策

コードは次のとおりです（例）：

// ルートエクスポート関数をリセットする resetRouter() {
  定数 newRouter = createRouter()
  router.matcher = newRouter.matcher // ルートのマッチングパスをリセットします}

このメソッドはルートを再インスタンス化します。これは新しいルートを変更することと同じです。以前に追加されたルートはもう存在しません。ログアウトするときにのみ呼び出す必要があります。

要約する

Vue プロジェクトで addRoutes を使用する際の問題の解決に関するこの記事はこれで終わりです。addRoutes を使用した Vue の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。