Vueのページジャンプルートは、2つの方法（ルータリンクとJS）を持っています

コンテンツにアクセスするためのさまざまな異なるURL経由でルーティングVue.js、マルチビューシングルページのWebアプリケーション

1、による <ルータ-link>の実装

<ルータ・リンク> アセンブリはナビゲーションリンクのために提供され、HTMLコンテンツが異なるスイッチング

どのように使用するには：

< ルータリンクへ= "DEMO2" > DEMO2 </ ルータリンク>

< ルータリンク：に=「『DEMO2』」> DEMO2 </ ルータリンク> 

<！ - {}でラップしてもよく、または、対応するパス名- > 
< ルータリンク：へ'：「= {名前DEMO2「} " > DEMO2 </ ルータリンク>

< ルータリンク：へ= "{名： 'DEMO2'、paramsは：{にuserId：123}}" > DEMO2 </ ルーターリンク>

パラメータ渡しを必要とする場合 router.jsはに対応する：パスDEMO2に配置され、DEMO2のパスにワイルドカードを追加はuserId、次のように：

{ 
  パス：'/ DEMO2 /：はuserId'、
  名称： 'DEMO2'、
  成分：DEMO2
 } 、

設定後、ページジャンプの結果/ DEMO2 / 123

ここでは「123」を超えているのuserId

だから、どのように新しいページの上に渡すパラメータを取得するためにはuserId、それを？

取り付けられたフック使用。この$のroute.params.xxを以下のように、オーバー渡されたパラメータを取得します：

搭載（）{ 
    アラート（この。$経路はparamsは.userId）を
} 

// 弹出123

< ルータリンク：へ= "{パス： 'DEMO2'、クエリ：{計画： 'プライベート'}}" > DEMO2 </ ルーターリンク>

結果ページジャンプ / DEMO2？=プライベートプラン

（この中で使用されていないことに注意router.js内部構成パス）

新しいページアドレスキーと値のペア計画上を通過するには、Get、あなたがすることができマウントにフックを使用して、この$のroute.plan.xx。下記の住所にキーの上を通過取得します：

マウント（）{ 
  警告（これます$ route.query.plan）
} 

// 弹出プライベート

テンプレートセクション：

< ボタン@click = "toURL" >ジャンプページ</ ボタン>

スクリプト部分：

（上記の経路であり、これはルータであることに注意してください）

方法：{ 
  toURL（）{ 
    この $のrouter.push（{パス：' / DEMO2 ' }）
  } 
}

方法：{ 
  toURL（）{ 
    この $のrouter.push（{名：' DEMO2 '、paramsは：{にuserId：123 }}）
  } 
}

方法：{ 
  toURL（）{ 
    この。$のrouter.push（{名：' DEMO2 '、のparams：{userIdを：123 }、クエリ：{計画：' プライベート' }}）
  } 
}