vue-routerルーティングネストが表示されません_vue:router-linkダイナミックルーティング

動的ルーティング:
ルーティングによって異なるデータが要求されます.
$router vue-routerインスタンス$route urlの詳細の取得
:idは、user後に任意のパラメータが対応するコンポーネントにアクセスできることを示しますが、「/」が必要です.
例:localhost:8080/user/1

// router.js  

印刷this.$route

<

idは$route.parms.id中
次にtemplateにレンダリングします
ヘッダーファイル:urlでidを直接変更すると変わりますが、切り替えコンポーネントでは変わりません.

<

これはidがコンポーネントを再作成するときに初期化されるためであり、user 1とuser 2はいずれもuserコンポーネントから来ているため、彼らの間で切り替えても初期化されない.
解決:watchを使用して変化するルーティングを監視

<

to:user/2まで;from:user/1から.
ネストされたルーティング
サブルーティングはすべて/userを基準にして、サブルーティングを書くと同時にuser.vueにはrouter-viewラベルを書いて展示します.

import 

サブルート
今userStartのliをrouter-linkに変えて、直接クリックして切り替えることができます

ユーザーの詳細に編集ボタンをネスト

名前付きルーティング
router-linkラベルのtoプロパティが書きにくいため、名前付きルーティングを使用します.
to属性で使用するオブジェクトには、routerに対応する2つのパラメータnameとparamsがある.js中性子ルーティングのname,paramsフィールドは現在のid値に対応する.

// router.js  

userDetailvueファイル

<

以前の$router-pushでも名前付きルーティングを使用できます
パス:
toのurlの後に追加できますか?
queryオブジェクトを使用できます
受信パス:
$route,query.a
このテープが好きではない会社もあるそうです.の伝参?
必要に応じて選択
需要:コンポーネント名を使用して、headerコンポーネントはホームの下にのみ表示され、Userの下で非表示になります.
ヘッダーコンポーネントをネーミングし、ネーミング名が表示されます.
/userの場合、デフォルトのrouter-viewに一致して表示されます.
名前付きヘッダーコンポーネント
リダイレクト
もし/任意のもの(ルーティングの範囲外のもの)があれば、何もロードできません.
ルーティングフィールドにオブジェクトを書き直し、pathはワイルドカード*を使用して、上のパスが同じでなければ、この道を行くことを示します.もう1つのredirectフィールドは、リダイレクト先を示すフィールドで、トップページであってもよいし、errorページであってもよいし、任意のページであってもよい.

// router.js  

リダイレクト