Vueで前のページにジャンプする方法

この記事では、ログイン後に前のページへのページジャンプを実装する Vue の機能を共有します。この便利さを必要とする友人は、それから学ぶことができます。

開発では、ユーザーがページに入るためにリンクを直接クリックする必要があることがよくあります。ユーザーがリンクをクリックすると、ログイン後に 401 インターセプトがトリガーされ、ログイン インターフェイスに戻ります。ホームページではなく、リンクされたページにジャンプします。 この問題を解決するにはどうすればよいですか?

まず、使用する必要があるいくつかの API について説明します:

1.router.currentRoute: 現在のルーティング情報オブジェクト。router.currentRoute.fullPath を通じて、クエリ パラメーターとハッシュのフル パスを含む解析された URL を取得できます。 , アクセスしたいページのルートに名前がある場合は、router.currentRoute.name を通じて現在のルートの名前を取得できます。

2.router.replace: 関数は router.push と同じですが、履歴に新しいレコードを追加するのではなく、現在の履歴レコードを置き換えます。

コードの書き方は人それぞれ異なるため、私の具体的な実装コードは記載しませんが、アイデアを簡単に紹介します。

1. ユーザーがリンクをクリックすると、ターゲットのルーティング ページにジャンプします。 401 インターセプトをトリガーし、ログイン ページに戻ります:

//401拦截
if（status == "401"）{
  router.push("/login")   
}

2. 401 をインターセプトするときに、ターゲット リンクを URL に保存できます:

if (status == 401) {
   //判断当前的路由是否是目标路由
   if(router.currentRoute.name == "target"){
    //跳转回login路由，并把目标路由的url路径保存在login的query中
    router.replace({
     name:"login",
     query: {redirect: router.currentRoute.fullPath}
    })
   }else{
    /* 普通401拦截直接返回到登录页面 */
    router.push('/login');
   }
  }

3. ログインをクリックした後、URL に保存されたクエリを使用して、ログイン ページに戻ります。対象ページ

router.push({path:decodeURIComponent(url)});

を皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

vuexの中国語ドキュメントの詳しい紹介

pure jsでドロップダウンリストを生成する方法

vueでのファイルの使い方について

jqueryを導入する方法vue-cli webpack (詳細チュートリアル)

以上がVueで前のページにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。