Vue は、ログイン後にページが前のページにジャンプすることを認識します。

開発では、ユーザーがページに入るためにリンクを直接クリックする必要があることがよくあります。ユーザーがリンクをクリックすると、401 インターセプトがトリガーされ、ログイン後にログイン インターフェイスに戻ります。この問題を解決するにはどうすればよいですか?この記事では主に、ログイン後に前のページにジャンプするために Vue が実装する機能について説明します。この便利さを必要とする友人は、この機能から学ぶことができます。皆さんのお役に立てれば幸いです。

まず、使用する必要があるいくつかの 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)});

関連する推奨事項:

WeChat Xiaocheng でテキストをクリックしてページ ジャンプ機能を実装する方法

パラメータを渡す HTML ページ ジャンプに関する質問への回答

HTMLページジャンプとパラメータ 配信に関する質問

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