05-vue-cli-routing 構成

1.vue-routerルーティング

1.vue-routerとは何ですか

        ここでいうルーティングとは、通常いわゆるハードウェアルーターのことではなく、SPA（Single Page Application）のパスマネージャーのことです。平たく言えば、vue-router は WebApp のリンク パス管理システムです。

        Vue-router は Vue.js の公式ルーティング プラグインで、vue.js と深く統合されており、シングルページ アプリケーションの構築に適しています。Vue のシングルページ アプリケーションはルーティングとコンポーネントに基づいており、ルーティングはアクセス パスの設定、パスとコンポーネントのマップに使用されます。従来のページ アプリケーションは、ページの切り替えやジャンプにいくつかのハイパーリンクを使用します。vue-router シングルページ アプリケーションでは、パス間の切り替え、つまりコンポーネントの切り替えです。ルーティング モジュールの本質は、URL とページ間のマッピング関係を確立することです。

        なぜ a タグを使用できないかというと、Vue は単一ページのアプリケーションを作成するために使用されるためです (プロジェクトをパッケージ化する準備ができたときに、npm run build を実行すると、dist フォルダーが生成されます。静的リソースとindex.htmlページ）のため、作成したタグは機能しません。管理するにはvue-routerを使用する必要があります。

2、vue-router 実装原則

        SPA (シングル ページ アプリケーション): 完全なページが 1 つだけあるシングル ページ アプリケーション。ページをロードするときに、ページ全体をロードするのではなく、指定されたコンテナ内のコンテンツのみを更新します。

        シングル ページ アプリケーション (SPA) の中核の 1 つは、ページを再リクエストせずにビューを更新することです。

        vue-router がシングルページ フロントエンド ルーティングを実装する場合、ハッシュ モードとヒストリー モードの 2 つのメソッドが提供され、モード パラメータに従ってどちらのメソッドを使用するかを決定します。

1. ハッシュモード、#アンカーポイント

        vue-router のデフォルトのハッシュ モード - URL のハッシュを使用して完全な URL をシミュレートするため、URL が変更されてもページはリロードされません。ハッシュ (#)は URL のアンカー ポイントであり、Web ページ内の位置を表します。# 以降の部分を変更するだけで、ブラウザは対応する位置までスクロールするだけで、Web ページはリロードされません。 , ハッシュは URL に表示されますが、http リクエストには含まれず、バックエンドにはまったく影響を与えないため、ハッシュを変更してもページはリロードされません; 同時に # 以降の部分が毎回変更されます変更されると、ブラウザのアクセス履歴にレコードが追加され、「戻る」ボタンを使用すると、前の位置に戻ることができます。そのため、ハッシュ モードは、変更による異なる値に従って、指定された DOM 位置に異なるデータをレンダリングします。アンカーポイントの値。ハッシュ モードの原理は onhashchange イベント (ハッシュ値の変更を監視) であり、ウィンドウ オブジェクト上で監視できます。

個。

2. ヒストリーモード、トラディショナルモード、/

        ハッシュ モードには URL に独自の # が含まれるため、醜いハッシュを望まない場合は、ルートの履歴モードを使用できます。ルートを設定するだけで済みます。

        ルールを使用する場合は、「mode: 'history'」を追加します。

        ルーターディレクトリ配下のindex.jsファイルにヒストリーモードを追加しますが、このときアドレスバーの#番号は省略可能です。

3. vue-router-404 ページ

        履歴モードを使用する場合、ユーザーが間違ったページ アドレスを入力すると、返されるページは空白になり、非常に不親切です。

        ユーザーが間違ったページを入力した場合、私たちはユーザーにフレンドリーなプロンプト ページ (よく 404 ページと呼ばれるもの) を提供したいと考えています。Vue-router もそのようなメカニズムを提供します

1 error404.vueページを作成する

<template>
  <div>
      <h1>404错误！请检查你的地址是否正确！</h1>
  </div>
</template>

<script>
</script>

<style>
</style>

2 ルーティングディレクトリ下のindex.jsにエラーコンポーネントを導入します。

import Vue from 'vue'
import Router from 'vue-router'
/*  配置地址，叫组件
    第一种：导入hello组件
    */
import error404 from '../components/demo/error404.vue'

Vue.use(Router)

export default new Router({
  // 切换到history模式
  mode:"history",
  routes: [
    {
      path: '*',  //*，通配所有的错误地址
      name: 'error404',
      component: error404
    },
  ]
})

3 エラー ルーティング アドレスを設定します。アドレス * はすべてのエラー アドレスをワイルドカードで表します。

    {
      path: '*',  //*，通配所有的错误地址
      name: 'error404',
      component: error404
    },

4 完了しました。間違ったルーティング アドレスを入力すると、エラー ページの情報が表示されます。

4、vue-router-routing ナビゲーション

1. プログラムによるナビゲーション

2. 宣言型ナビゲーション

1. プログラムによるナビゲーション

1.1 最初のタイプ: this.$router.replace() 関数

//最初のタイプ: ページジャンプを完了するルートの名前を指定します

        this.$router.replace({name: "テーブル コンポーネント"})

// 2 番目のタイプ: ページ ジャンプを完了するルートのパスを指定します

        this.$router.replace("/table")

replace: ロールバックできず、銀行システムも使用できません。より高いセキュリティ

<template>
  <div>
    <h1>编程时导航</h1>
    <button type="button" @click="test01" >1：用replace方法以url地址作为参数调整</button>
    <button type="button" @click="test02" >2：用replace方法以name地址作为参数调整</button>
  </div>
</template>

<script>
  export default {
    name:"testLogin",
    methods:{
      test01(){
        //replace以url作为参数
        this.$router.replace("/testIndex");
      },
      test02(){
        //replace以name作为参数
        this.$router.replace({"name":"testIndex"});
      },
    }

  }
</script>

<style>
</style>

1.2 2 番目のタイプ: this.$router.push() 関数

//最初のタイプ: ページジャンプを完了するルートの名前を指定します

        this.$router.push({名前: "テーブルコンポーネント"})

// 2 番目のタイプ: ページ ジャンプを完了するルートのパスを指定します

        this.$router.push("/テーブル")

プッシュ: 前のページに戻ることができますが、セキュリティは高くありません

<template>
  <div>
    <h1>编程时导航</h1>
    <button type="button" @click="test03" >3：用push方法以url地址作为参数调整</button>
    <button type="button" @click="test04" >4：用push方法以name地址作为参数调整</button>
  </div>
</template>

<script>
  export default {
    name:"testLogin",
    methods:{
      test03(){
        //push以url作为参数
        this.$router.push("/testIndex");
      },
      test04(){
        //push以url作为参数
        this.$router.push({"name":"testIndex"});
      },

    }

  }
</script>

<style>
</style>

1.3. $router.push と $router.replace の違い:

        プッシュメソッドでジャンプすると履歴スタックに新しいレコードが追加され、ブラウザの戻るボタンをクリックすると前のページが表示されます。

        replace メソッドを使用すると、新しいレコードは履歴に追加されませんが、現在の履歴レコードが置き換えられます。つまり、置き換えによってジャンプしたページの後は、「戻る」ボタンで前のページを表示できなくなります。

2. プログラムによるナビゲーションパラメータの転送

2.1 testLogin コンポーネントでナビゲーションを定義する

        値 1 を testIndex コンポーネントに渡します

test02(){
        //replace以name作为参数
        this.$router.replace({
            "name":"testIndex",
            query:{
                    "name":this.userName,
                    "pwd":"123",
                  },
          });
      },
      test04(){
        //push以url作为参数
        this.$router.push({
            "name":"testIndex",
            query:{"name":this.userName},
          });
      },

2.2 testIndex コンポーネントで渡された値を受け取る

$route.query.one ，在页面取值如下：

<template>
    <div>
      <span>testIndex</span>
      <span>{
   
   {$route.query.name}}</span>
    </div>
</template>

2.3 testIndexのjsコード内の値を取得する

<script>
  export default{
      name:"testIndex",
      mounted(){  //挂载函数
        var name = this.$route.query.name;
        console.log("name"+name);
      }
  }
</script>

3. 宣言型ナビゲーション

 <h1>声明式导航</h1>
 //指定路由的name完成页面跳转
  <router-link :to="{'name':'testIndex'}">1:页面跳转不传值</router-link>

4. 宣言型ナビゲーションパラメータの受け渡し

1. testLogin コンポーネントでラベルを定義し、「userName」を testIndex コンポーネントに渡します

  <h1>声明式导航</h1>
  <router-link :to="{'name':'testIndex',query:{'name':userName}}">2:页面跳转传值</router-link>

2. testIndex コンポーネントで渡された値を受け取ります: $route.query.one 。ページ上の値は次のとおりです。

<template>
    <div>
      <span>testIndex</span>
      <span>{
   
   {$route.query.name}}</span>
    </div>
</template>

3.testIndexのjsコードの値を取得します。

<script>
  export default{
      name:"testIndex",
      mounted(){  //挂载函数
        var name = this.$route.query.name;
        console.log("name"+name);
      }
  }
</script>