vue ルーティング ビュー router-view のネストされたジャンプの実装

<テンプレート>
  <div id="アプリ">
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  メソッド: {
  }
}
</スクリプト>

<スタイル>
</スタイル>

<テンプレート>
  <div id="ログイン">
    <el-form>
      <el-row :gutter="20">
        <el-col class="title" :offset="9" :span="6">
          <h1>ログインページ</h1>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col class="col-label" :offset="7" :span="4">
          <span class="label">アカウント:</span>
        </el-col>
        <el-col :span="4">
          <el-input type="text" placeholder="アカウント番号を入力してください" v-model="account.username"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col class="col-label" :offset="7" :span="4">
          <span class="label">パスワード:</span>
        </el-col>
        <el-col :span="4">
          <el-input type="password" placeholder="パスワードを入力してください" v-model="account.password"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="8" :span="8">
          <span>
            <a href="#" rel="external nofollow" rel="external nofollow" @click="register" >アカウントを登録</a>
            /
            <a href="#" rel="external nofollow" rel="external nofollow" @click="resetPwd" >パスワードをリセット</a>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="10" :span="4">
          <el-button type="primary" round @click="onSubmit">ログイン</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'ログイン',
  データ（） {
    戻る {
      アカウント：
        ユーザー名: ''、
        パスワード: ''
      }
    }
  },
  メソッド: {
    登録する（） {
      this.$メッセージ({
        メッセージ: 「そのような機能は存在しないようです」
        タイプ: '情報'
      })
    },
    リセットPwd() {
      this.$メッセージ({
        メッセージ: 「来世」
        タイプ: '成功'
      })
    },
    送信() {
      this.$router.push('/index')
    }
  }
}
</スクリプト>

<スタイルスコープ>
  ＃ログイン {
    テキスト配置: 中央;
    マージン: 0 自動;
  }
  .ラベル {
    高さ: 40px;
    行の高さ: 40px;
  }
  .col-label {
    テキスト配置: 右;
  }
  .el-行 {
    上マージン: 15px;
  }
  .el-ボタン{
    幅: 120ピクセル;
  }
  。タイトル {
    上マージン: 10%;
  }
</スタイル>

コードを表示

{
      パス： '/'、
      名前: 'ログイン',
      コンポーネント: () => import('../views/login/login.vue')
},

<テンプレート>
  <el-container style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1']" :router="true">
        <el-サブメニューインデックス="1">
          <template slot="title"><i class="el-icon-message"></i>ナビゲーション 1</template>
          <el-メニュー項目グループ>
            <template slot="title">グループ 1</template>
            <el-menu-item index="1-1">オプション 1</el-menu-item>
            <el-menu-item index="1-2">オプション 2</el-menu-item>
          </el-menu-item-group>
        </el-サブメニュー>
      </el-menu>
    </el-aside>

    <el-container class="table-div">
      <el-header style="text-align: right; font-size: 12px">
        <el-ドロップダウン>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="ドロップダウン">
            <el-dropdown-item>表示</el-dropdown-item>
            <el-dropdown-item>新規</el-dropdown-item>
            <el-dropdown-item>削除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王暁湖</span>
      </el-header>

      <メイン>
        <テーブル></テーブル>
      </el-main>
    </el-コンテナ>
  </el-コンテナ>
</テンプレート>

<スタイル>
.el-ヘッダー{
  背景色: #B3C0D1;
  色: #333;
  行の高さ: 60px;
}

.el-aside {
  色: #333;
}
</スタイル>

<スクリプト>
エクスポートデフォルト{
  名前: 'インデックス',
  データ（） {
  }
}
</スクリプト>

<スタイル>
  .table-div {
    幅: 100%;
  }
  .el-テーブル{
    高さ: 100%;
  }
</スタイル>

{
      パス: '/index',
      名前: 'インデックス',
      コンポーネント: () => import('@/components/index')
}

{
      パス: '/index',
      名前: 'インデックス',
      component: () => import('@/components/index'), // ここでホームページのデフォルトルートジャンプのページコンポーネントを設定します children: [ // 子ルートを追加します {
          path: 'page', // 注意: パスの前に / を付けないでください。そうしないとジャンプしません。ここで損失を被りました。name: 'page',
          components: { // パラメータ名にはsが付いていることに注意してください
            table: () => import('@/components/first-page') // ここでのテーブルは、ホームページの router-view タグの名前と同じである必要があります。これにより、ホームページのルーティング ビューがジャンプします。3.2 を参照してください。
          }
        },
        {
          パス: 'テーブル',
          名前: 'テーブル',
          コンポーネント:
            テーブル: () => import('@/components/first-table')
          }
        }
      ]
}