Vueはログインジャンプを実装する

<テンプレート>
    <div class="ログインコンテナ">
        <el-form :model="ruleForm2" :rules="rules2"
         ステータスアイコン
         ref="ルールフォーム2" 
         ラベル位置="左" 
         ラベル幅="0px" 
         class="デモルールフォームログインページ">
            <h3 class="title">ログイン プラットフォーム</h3>
            <el-form-item prop="ユーザー名">
                <el-input type="text" 
                    v-model="ruleForm2.ユーザー名" 
                    オートコンプリート="オフ" 
                    placeholder="ユーザー名"></el-input>
            </el-form-item>
            <el-form-item prop="パスワード">
                <el-input type="パスワード" 
                    v-model="ruleForm2.password" 
                    オートコンプリート="オフ" 
                    placeholder="パスワード"></el-input>
            </el-form-item>
            <el-form-item スタイル="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">ログイン</el-button>
            </el-form-item>
            <el-form-item>
                <el-チェックボックス 
                    v-model="チェック済み"
                    class="rememberme">パスワードを記憶する</el-checkbox>
                <el-button type="text" @click="forgetpassword">パスワードを忘れた場合</el-button>
            </el-form-item>
            
        </el-form>
    </div>

</テンプレート>

<スクリプト>
  '../api/api' から { requestLogin } をインポートします。
  エクスポートデフォルト{
    データ（） {
      戻る {
        ログイン: false、
        ルールフォーム2: {
        },
        ルール2: {
          アカウント： [
            { 必須: true、メッセージ: 'アカウント番号を入力してください'、トリガー: 'blur' },
          ]、
          チェックパス: [
            { 必須: true、メッセージ: 'パスワードを入力してください'、トリガー: 'blur' },
          ]
        },
        チェック済み: true
      };
    },
    メソッド: {
      ハンドルリセット2() {
        this.$refs.ruleForm2.resetFields();
      },
      ハンドル送信(ev) {
        this.$refs.ruleForm2.validate((有効) => {
          （有効）の場合{
            this.logining = true;
            var loginParams = { ユーザー名: this.ruleForm2.username、パスワード: this.ruleForm2.password、識別コード: this.ruleForm2.identifycode };
            リクエストログイン(ログインパラメータ)。その後(データ => {
              this.logining = false;
              {msg、コード、ユーザー} = データとします。
              (コード!== 200)の場合{
                this.$メッセージ({
                  メッセージ: メッセージ、
                  タイプ: 'エラー'
                });
              } それ以外 {
                (user.type === "admin")の場合{
                    sessionStorage.setItem('user', JSON.stringify(user));
                    this.$router.push({ パス: '/homepage' });
                } それ以外の場合 (user.type === "advert") {
                    sessionStorage.setItem('user', JSON.stringify(user));
                    this.$router.push({ パス: '/table' });
                }
              }
            });
          } それ以外 {
            console.log('送信エラー!!');
            false を返します。
          }
        });
      },
      パスワードを忘れた(){
          this.$alert('パスワードを取得するには管理者に連絡してください。管理者の電話番号: 131xxxxxxxx', 'プロンプト', {
          confirmButtonText: '確認'、
          タイプ: '警告'
        })
      }
    }
  }
</スクリプト>

<スタイルスコープ>
    label.el-checkbox.rememberme {
        マージン: 0px 0px 15px;
        テキスト配置: 左;
    }
    label.el-button.forget {
        マージン: 0;
        パディング: 0;
        境界線: 1px 透明の実線;
        アウトライン: なし;
    }
</スタイル>

<テンプレート>
    <el-row クラス="コンテナ">
        <el-col :span="24" class="header">
   <el-col :span="18" class="logo" >
                {{sysName}}
   </el-col>
   <el-col :span="4" class="ユーザー情報">
    <el-dropdown トリガー="hover">
     <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
     <el-dropdown-menu slot="ドロップダウン">
      <el-dropdown-item>私のメッセージ</el-dropdown-item>
      <el-dropdown-item>設定</el-dropdown-item>
      <el-dropdown-item @click.native="logout">ログアウト</el-dropdown-item>
     </el-dropdown-menu>
    </el-dropdown>
   </el-col>
  </el-col>
        <el-col :span="24" class="main">
            <余談>
                <el-menu :default-active="$route.path" class="el-menu el-menu-vertical-demo" @select="handleselect"
                        ユニークオープンルーター >
                        <テンプレート v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
      <el-submenu :index="index+''" v-if="!item.leaf">
       <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
       <el-menu-item v-for="item.children 内の子" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
      </el-サブメニュー>
      <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
     </テンプレート>
                </el-menu>
            </余談>
   <セクションクラス="コンテンツコンテナ">
    <div class="grid-content bg-purple-light">
     <el-col :span="24" class="breadcrumb-container">
      {{$ルート名}}
     </el-col>
     <el-col :span="24" class="content-wrapper">
      <トランジション名="フェード" モード="アウトイン">
       <ルータービュー></ルータービュー>
      </トランジション>
     </el-col>
    </div>
   </セクション>
  </el-col>
    </el-row>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    データ（） {
   戻る {
    sysName:'xxx 管理プラットフォーム',
    システムユーザー名: ''、
    sysUserAvatar: ''、
    形状： {
     名前： ''、
     地域： ''、
     日付1: ''、
     日付2: ''、
     配達: 偽、
     タイプ： []、
     リソース： ''、
     説明: ''
    }
   }
        },
    メソッド: {
   //ログアウト: 関数 () {
    var _this = これ;
    this.$confirm('終了して確認しますか?', 'プロンプト', {
     //タイプ: '警告'
    }).then(() => {
     sessionStorage.removeItem('ユーザー');
     _this.$router.push('/login');
    }).catch(() => {

    });
   }
  },
    マウント() {
   var user = sessionStorage.getItem('user');
   if (ユーザー) {
    ユーザー = JSON.parse(ユーザー);
    this.sysUserName = user.name || '';
    this.sysUserAvatar = user.avatar || '';
   }

  }
}
</スクリプト>

<スタイル スコープ lang="scss">
@import '../style/vars.scss';

    。容器 {
  位置: 絶対;
  上: 0px;
  下: 0px;
  幅: 100%;
    }
    .ヘッダー{
   高さ: 60px;
            行の高さ: 60px;
   背景: $color-primary;
   色:#fff;
   .ユーザー情報{
    テキスト配置: 右;
    右パディング: 35px;
    フロート: 右;
    .userinfo-inner {
     カーソル: ポインタ;
     色:#fff;
     画像 {
      幅: 40px;
      高さ: 40px;
      境界線の半径: 20px;
      マージン: 10px 0px 10px 10px;
      フロート: 右;
     }
    }
   }
   .ロゴ {
    高さ:60px;
    フォントサイズ: 22px;
    パディング左:20px;
    画像 {
     幅: 40px;
     フロート: 左;
     マージン: 10px 10px 10px 0px;
    }
    。TXT {
                    色:#fff;
    }
   }
   .ロゴ幅{
    幅:230ピクセル;
   }
   .logo-collapse-width{
    幅:60ピクセル
   }
   。タイトル{
                フォントサイズ: 22px;
    パディング左:20px;
    行の高さ: 60px;
    色:#fff;
   }
        }
    。主要 {
   ディスプレイ: フレックス;
   位置: 絶対;
   上: 60px;
   下: 0px;
   オーバーフロー: 非表示;
   脇に
    フレックス:0 0 230px;
    幅: 230ピクセル;
    .el-メニュー{
                    高さ: 100%;
                    /* 幅: 34%; */
    }
   }
   .コンテンツコンテナ{
    フレックス：1;
    /* オーバーフロー-y: スクロール; */
    パディング: 20px;
    .ブレッドクラムコンテナ{
     。タイトル {
      幅: 200ピクセル;
      フロート: 左;
      色: #475669;
     }
     .breadcrumb-inner {
      フロート: 右;
     }
    }
    .コンテンツラッパー{
     背景色: #fff;
     ボックスのサイズ: 境界線ボックス;
    }
   }
  }
</スタイル>

<テンプレート>
   <p>ホームページ</p>
</テンプレート>

'./views/Login.vue' からログインをインポートします。
'./views/Home.vue' から Home をインポートします。
'./views/list/homepage.vue' からホームページをインポートします。 
'./views/list/Table.vue' からテーブルをインポートします。

ルートを = [
    {
        パス: '/login',
        コンポーネント: ログイン、
        名前： ''、
        非表示: true
    },
    {
        パス： '/'、
        コンポーネント: ホーム、
        名前： ''、
        leaf: true, // ノードは 1 つだけ iconCls: 'el-icon-menu', // アイコン スタイル クラス
        子供たち： [
            { パス: '/homepage'、コンポーネント: ホームページ、名前: 'ホームページ' },
        ]
    },
    {
        パス： '/'、
        コンポーネント: ホーム、
        名前: 'メニュー',
        // leaf: true, // ノードは 1 つだけ iconCls: 'el-icon-message', // アイコン スタイル クラス
        子供たち： [
            { パス: '/table'、コンポーネント: テーブル、名前: 'サブメニュー 01' }
        ]
    }
];

デフォルトルートをエクスポートします。

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'vue-router' から VueRouter をインポートします。
'./routes' からルートをインポートします
'vuex' から Vuex をインポートします
'./vuex/store' からストアをインポートします。
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
'./mock' から Mock をインポートします。
モック
'./style/login.css' をインポートします

/* Vue.use(VueAxios、axios) */
Vue.use(要素UI)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.config.productionTip = false

const ルーター = 新しい VueRouter({
  ルート
})

router.beforeEach((to, from, next) => {
  //NProgress を開始します。
  to.path == '/login'の場合{
    sessionStorage.removeItem('ユーザー');
  }
  user = JSON.parse(sessionStorage.getItem('user')); とします。
  if (!user && to.path != '/login') {
    次へ({ パス: '/login' })
  } それ以外 {
    次（）
  }
})

新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App)
}).$mount('#app')