Day06-VueのVueのルーティングを学習（ルータ）の関連知識

以下は、研究ノート、次のとおりです。

ステップを使用して1コアプラグヴュー、ルータ

<divの上記のid = "アプリケーション">
　　<UL>
　　　　<LI>
　　　　　　< -エントランス:!ラベルは実際には、A - >
　　　　　　<=に-Linkルーター"/ホーム">ホーム</ルーターリンク>
　　　　</李>
　　</ UL>

　　<！ - ルート出口を指定します。 - >

　　<ルータビュー> </ルータビュー>

</ div>

<SCRIPT SRC = "./ vue.js "> </ SCRIPT>
<SCRIPT SRC =" ./ VUE-router.js"> </ SCRIPT>
<SCRIPT>
//ルートの手順を使用しては：
1 @搭載されている：NPM -S-ルータVUE I
2 @（vue.jsに依存しなければならない）VUEルータに導入される
//ルーティングインスタンスを作成する。3
// 4と共にVUEインスタンスを関連付けるルーティングインスタンス
5 @ルーティング・ルール・インスタンスを構成しています
/対応関係/ハッシュ値とコンポーネント
6出口指定されたルート@（ルートはページ上の現在位置に一致表示を示している）
//指定されたルートエントリ7

ホームVue.component =定数（ '自宅'、{
　　テンプレート： `
　　家<のH1>このコンポーネントは<の/ H1>は
　　'
}）

//インスタンスルーティング作成
CONST =新しい新しいルータVueRouter（{
ルート：[
{パス： '/ホーム'、コンポーネント：ホーム}
]
}）

constのVM =新しいヴュー（{
エル： '#app'、
データ：{

}
//例は、一緒に関連付けるためにルーティングされた
ルータを
）}
</ SCRIPT>

2.ルーティングリダイレクション

ルータ= constの新しい新VueRouter（{ 
      路線：[ 
        @ リダイレクション：
        // /デフォルトのパスは、最初のページが開かれ、それがパスにアクセスしますです
        //をこのパスの一致をリダイレクトすることができます指定することで、発見された場合他のルーティングへのリダイレクト
        {パス： '/'、リダイレクト'/ホーム' } 、 
        {パス： '/ホーム' 、コンポーネント：ホーム} 
      ] 
 }）

3.ルーティングパラメータ（動的ルーティング一致）

----意味ルーティングパラメータ：

    STU1 = CONST { 
      テンプレート： `
        の<div> 
          <P>これは最初の学生であり、1111年</ P> 
        </ div>       ` 
    } 
    CONST STU2 = { 
      テンプレート： `の<div> 
          <P>これは第二の学生2222 </ P> 
        </ div>       ` 
    } 
    CONSTルータ = 新しい新しいVueRouter（{ 
      ルート：[ 
        {パス： '/'、リダイレクト'/ホーム' }、
        {パス： '/ホーム' 、コンポーネント：ホーム}、
        {パス： '/ STU / 1001' 、コンポーネント：STU1}、
        {パス：'/ STU / 1002'

        
、コンポーネント：STU2}は、
　　　　　多くのそのような学生データがある場合、//、それは非常に複雑なルーティング構成となり、同等の構成要素の数（これらはほとんど異なるがない）およびルーティング・ルールを与えられます 
      ] 
    }）

----ルーティングパラメータような使用

STU = CONST { 
      テンプレート： `
        の<div> 
          <P>これは最初の学生である{{}} $ route.params.id </ P> // ルーティングパラメータアセンブリで使用 
        </ div>       ` 
    } 
    CONSTルータ = 新しい新しいVueRouter（{ 
      ルート：[ 
        {パス： '/'、リダイレクト'/ホーム' }、
        {パス： '/ホーム' 、コンポーネント：ホーム}、@ ：IDは、ルーティングパラメータである// 一致するハッシュ値：/ STU / 1001 /又はSTU / 1002 /又はSTU / ABCは// ハッシュ値と一致しない：/ STU又は/ STU /または/ STU / 1001 / AB＆ 
        {パス： '/ STU / ：ID ' 、コンポーネント：ステュー}、
         //



        
        
        {パス： '/ STU / 1001'、成分：STU1} 
        // {パス： '/ STU / 1002'、成分：STU2} 
      ] 
    }）

パラメータをルーティングするとき----しかし/ STU / 1001 / STU / 1002ナビゲートする場合は、元のコンポーネントのインスタンスが多重化され、それに応じて、フック構成要素のライフサイクルが呼び出されません。論理たらフック関数で記述されたコードは、トリガー多重化データ更新に問題があるでしょう！

再利用可能なコンポーネントは、ルーティングパラメータの変化に対応したいときは、単に（変更を監視）見ることができる $route オブジェクト：

ステュー=一定{ 
  テンプレート：「...」、
  ウォッチ：{ //ルート変更、それが引き金となります
     $ルートを（からに）{
       // ルートの変化に対応...（あなたがto.paramsを使用することができます。 ID取得したデータが正常に）前に更新されていない
    } // 深度モニターウォッチで、コンピューティングは、前述の属性は時計を計算されて 
  } 
}

4.ルートのネストされました

<DIV ID =「アプリケーション」> 
    <ルータリンクへ=「/ホーム」>ホーム</ルーターリンク> 
    <ルータリンクへ=「/ユーザ」>ユーザー管理</ルータリンク> 

    <ルータ-表示> </ルータ- [表示]> 
</ div> 
<SCRIPT SRC = "./ vue.js "> </ SCRIPT> 
<SCRIPT SRC =" ./ VUE-router.js"> </ SCRIPT> 

<SCRIPT> 
    constのホーム = { 
      テンプレート： `
        ホーム<のH1>このコンポーネントは、<の/ H1>は
       ` 
    } 

    // 親要素： 
    =ユーザーをCONST { 
      テンプレート： `
         <DIV CLASS = "ユーザー"> 
          <H2>ユーザー</ H2> 
　　　　　　<！ -副入口経路- >　 
          <=「/ユーザー/プロファイル」>个人资料</ルータ・リンク>へのルータ・リンク
          =「/ユーザー/ポスト」に、<ルータリンク>岗位</ルータリンク>
          <！ -ここでは、ルーティングサブショー- > 
          <ルータ- [表示]> </ルータ- [表示]> 
        </ div>         ` 
    } // サブコンポーネント： 
    のUserProfile = CONST { 
      ：テンプレート「<H3>プロフィールを：張</ H3> ' 
    } 
    CONST UserPosts = { 
      テンプレート： ' <H3>ポスト：FE </ H3> ' 
    } 
    CONSTルータ = 新しい新しいVueRouter（{ 
      ルート：[ 
        { 
          パス： ' /ホーム' 、
          コンポーネント：ホーム
        }、
        { 
          パス： '/ユーザーズ、
          コンポーネント：ユーザー、

    


          // サブルーティング設定：
          子供：[ 
            { 
              // /ユーザ/プロファイルマッチングが成功した場合、
              // のUserProfileはユーザー<ルータビュー>でレンダリングされる 
              ：「プロフィール」パス、
              コンポーネント：のUserProfile 
            }、
            { 
              // /ユーザ/ポストうまくマッチ
              // UserPostsユーザー<ルータビュー>でレンダリングされる 
              パス： '投稿' 、
              コンポーネント：UserPosts 
            } 
          ] 
        } 
      ] 
    }）
    CONST VM = 新しい新しいヴュー（{ 
      EL： '#app'、
      データ：{ 

      }、

      ルータ
    }）
   </スクリプト>

ルートがハイライト

hoplinksルーティングエントリをクリックした後、VUEは、自動的に<ルータリンク>与えるタグには、2つのクラスを増加しました

ルータリンク - アクティブ（ファジーマッチ）

ルータ・リンクの正確なアクティブ（完全一致：リンクサブルートのネストされたルート、およびクリックは、親ルータリンク - アクティブ型、サブルートがルータ・リンク・アクティブおよびrouter-になります。 2つのリンク、正確活性型、ファジーマッチ、完全一致が成立しているため）

ネストされたルーティングにはしたくない場合は、親ルートが強調表示され、正確な性質は、TAに追加します

<=「/ユーザー」へのルータのリンクの正確な>ユーザー管理</ルータリンク>

さらに、プロパティインスタンスをルーティングに使用することができるlinkActiveClass

linkActiveClass '类の名'

Day06-VueのVueのルーティングを学習（ルータ）の関連知識

おすすめ