ページを追加

新しいページ

Test1125ファイルなどの新しいvueファイルをビューに作成します
ここに写真の説明を挿入

<template>
  <div>我是狗</div>
</template>

<script>
export default {
     
     
  name: "Test1125"
};
</script>

<style scoped></style>

ルートを追加

ここに写真の説明を挿入

import Vue from "vue";
import VueRouter from "vue-router";
import echartest from "../views/echartest";
import Test1125 from "../views/Test1125";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: echartest
  },
  {
    path: "/te",
    name: "te",
    component: Test1125
  }
];

const router = new VueRouter({
  // mode:'history',
  routes
});

export default router;

モード：「履歴」：このコントロールは

、これを記述しない場合、上の図のようになります。記述した後

ルートインターセプト

単純な傍受

ルートインターセプトを使用すると、ユーザーは特定のページを閲覧するときにログインできます。ログインしていない場合は、インターセプトして、ログインページまたは特定のページに戻ることができます。

効果を示すために、私は別のページを追加したルートパスは/ TESである。
まず、
追加
メタ：{ ：真requireAuthを}ルートおよびルートに傍受マークを追加します

{
    path: "/tes",
    name: "tes",
    component: Test1,
    meta: {
      requireAuth: true
    }
  }

それを真にするために変数toGoを宣言します

let toGo = true;

ルートインターセプターは次のとおりです

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (toGo) {
      next();/跳入to
    } else {
      next({
        path: "/te",/跳转路由
        query: { redirect: to.fullPath }/携带原本要跳转的页面路径参数，方便跳回
      });
    }
  } else {
    next();
  }
});

それはbeforeEach手段ことを確認するのは簡単です
から来ているから（あなたがするために、ジャンプをしませ書込みパラメータをすれば）次へとジャンプし、へリダイレクトするルートがある
トーゴがtrueの場合、それは実際に傍受されていません。
ここに写真の説明を挿入
今、我々は偽であるトーゴみましょう
私たちを見つけます/ teが傍受されたため、/ tesに入らなかった

そして、アドレスバーはhttp：// localhost：8083 / te？redirect =％2Ftes
がtesを運ぶ
ようになります。ログインまたはteでの検証などの特定の操作を完了すると、このパラメーターを使用してジャンプして戻ることができます。

アプリケーションシナリオ

一般に、ユーザーが入力する権限を持っているかどうか、または訪問者がユーザーである必要がある特定の操作を実行するタイミング、ジャンプログインなどを制御するために使用されます。

アクセス制御

たとえば、何かを購入したいのにログイン情報がない場合は、ログインページにジャンプする必要があります

アンチクローラー

または、値を設定します。ユーザーが本人でないときに頻繁にページにアクセスすると、確認ページにリダイレクトされます。ユーザーが操作を確認できる場合は、マシンの場合はインターセプトされます。もちろん、マシンは確認コードに合格する場合もあります。、しかしそれはまた彼の訪問の頻度を減らします

みなさん、こんにちは。私は「犬」であり、何千マイルも肉を食べることができるので、ソフトウェアカレッジのネットワークエンジニアリングの学生であるコードハスキーです。大学時代に学んだことをみんなと共有し、進歩していきたいです。ただし、レベルに限りがあるため、必然的にブログに間違いがありますので、抜けがありましたらお知らせください！当面は、csdnプラットフォームのブログホームページ（https://blog.csdn.net/qq_42027681）でのみ更新してください。

未经本人允许，禁止转载

ここに写真の説明を挿入

後で発売されます

フロントエンド：vueエントリvue開発アップルレットなど。
バックエンド：javaエントリspringbootエントリなど。
サーバー：mysqlエントリサーバープロジェクトを実行するための簡単な指示クラウドサーバー
python：ウォームアップしないことをお勧めし
ます。いくつかのプラグインなどの使用を確認してください。

大学のやり方も自分自身で、一生懸命勉強し、
情熱を持って若くなります。プログラミングに興味がある場合は、qqグループに参加して一緒にコミュニケーションをとることができます：974178910
ここに写真の説明を挿入

ご不明な点がございましたら、下にメッセージを残していただければ、よろしければ返信いたします。

VUE2クイックスタート（2）---ページと単純なルートインターセプトを追加