Vueのルーティングルール - パスパラメータ

パラメータを取得するために1、クエリメソッド

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
  SRC = "./ libに/ VUE-ルータ-3.0.1.js" > </ スクリプト> 
</ ヘッド> 

< 身体> 
  < DIV ID = "アプリケーション" > 
    <！ - ルートの場合、そのクエリ文字列、ルーティング伝送パラメータに、ルーティングルールのパスのプロパティを変更する必要はありません- > 
    < ルータのリンクに「？/ログインID = 10＆名前は= ZS」=は>ログは</ ルータリンク> 
    < ルータリンクへ=「/登録しますか？ABC = 123 " >登録</ ルータリンク> 
    < ルータ-ビュー> </ ルータービュー>
  </ DIV >

  < スクリプト> 

    VARのログイン= { 
      テンプレート：' ログ{{$ route.query.id} --- --- {{}}} $ route.query.name <の/ H1> <のH1> ' 、
      データ（）{ 
        リターン{ 
          ：MSG 「123 」
        } 
      }、 
      （）{ 作成// ライフサイクルフック関数成分
        はconsole.log（この。$ルート）
         // ルーティングクエリを取得するために使用されるパラメータは、注目持って来
        にconsole.logを（この。$のroute.query.id）
        はconsole.log（本。route.query.nameの$）
      } 
    }

    VaRのレジスタ= { 
      テンプレート：' <H1>注册</ H1> ' 、
      作成（）{ 
        にconsole.log（この。$ route.query.abc）
      } 
    } 

    VARのルータ=  新しいVueRouter（{ 
      ルート：[ 
        {パス：' /ログイン' ：ログイン}、成分、
        {パス：' /登録' 成分：}登録
      ] 
    }）

    // 创建ヴュー实例、得到ビューモデル
    VAR VM =  新しいヴュー（{
      ELを：'#app " 、
      データ：{}、
      メソッド：{}、
      // 同じ属性値を持つ属性名の名前書く必要がある
      // ルータを：ルータ
      ルータ
    }）; 
  </ スクリプト> 
</ ボディ> 

</ HTML >

図2は、パラメータを取得する方法をparamsは

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
  SRC = "./ libに/ VUE-ルータ-3.0.1.js" > </ スクリプト> 
</ ヘッド> 

< 身体> 
  < DIV ID = "アプリケーション" > 

    <！ - ルーティングルールに基づいてルーティングする場合パラメータは、パラメータを渡す- > 
    < ルータリンクへ=「/ログイン/ 12 / LS」>ログイン</ ルータリンク> 
    < ルータリンクへ=「/レジスタ/ Iは、パラメータ」>登録</ 追加Router-リンク> 

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

  </ DIV > 

  < スクリプト>

    VaRのログイン= { 
      テンプレート：' <H1の>ログ{{$ route.params.id} --- --- {{}}} $ route.params.name </ H1の> ' 、
      データ（）{ 
        リターン{ 
          MSG ：' 123 ' 
        } 
      }、
      作成（）{ // ライフサイクルフック関数成分
      // の取得パラメータparamsと
        はconsole.log（この$のroute.params.id。）
      } 
    } 

    VARのレジスタ= { 
      テンプレート：' の<H1 >登録- {{}} $ route.params.a <>の/ H1 ' 、
      作成（）{// ライフサイクルフック関数成分
      // の取得パラメータparamsと
        はconsole.log（この$のroute.params.a。）
      } 
    } 

    Varのルータ=  新しい新しいVueRouter（{ 
      ルート：[ 
        @ ルーティングルールにおけるによって：形状パラメータ値を設定するためのパラメータを渡す
        {パス：' /ログイン/：ID /：名' 、コンポーネント：ログイン}、
        {パス：' /レジスタ/：A ' 、コンポーネント：登録} 
      ] 
    }）

    // ヴューを与えるインスタンスを作成ViewModel 
    VAR VM =  新しい新しいヴュー（{ 
      EL：' #app '、
      データ：{}、
      メソッド：{}、
      // ルータ：ルータの
      ルータ
    }）。
  </ スクリプト> 
</ ボディ> 

</ HTML >