vue 2ルーティングrouter.push()

前言
 本文は記録として、原文はここから転じて、一部の内容の改善に対して自分の理解を加えた.
router.push(location)
 を使用してaラベルを作成してナビゲーションリンクを定義するほか、routerのインスタンスメソッドを使用して、コードを記述することによって実現することもできます.

router.push(location)

 異なるURLにナビゲートしたい場合は、router.pushメソッドを使用します.この方法はhistoryスタックに新しいレコードを追加するので、ユーザがブラウザの戻るボタンをクリックすると、前のURLに戻る.
 を有するtemplateにおいて、ユーザがこのリンクをクリックすると、実質的には内部でrouter.push()メソッドが呼び出されるので、表示呼び出しrouter.push(...)は実質的にと一致し、1つはラベル用法であり、1つは脚論理用法である
宣言:プログラミング:router.push(...)この方法のパラメータは、文字列パス、またはアドレスを記述するオブジェクトであってもよく、いくつかの一般的な使用法は以下の通りである.

//    
router.push('home')

//   
this.$router.push({path: '/login?url=' + this.$route.path});

//      
router.push({ name: 'user', params: { userId: 123 }});

//      ，  /backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});

//       
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {
            if (code === 0) {
                //   
                this.$router.push({path: '/home'});
            }else if(code === 10){
                //      ，  /login?stage=stage
                this.$router.push({path: '/login', query:{stage: stage}});
           }
});

//         
let queryData = {};
if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});

 
replaceキーワード
 replaceプロパティを設定すると、クリックするとrouter.replace()ではなくrouter.push()が呼び出され、ナビゲーション後にhistoryの記録は残りません.戻るボタンをクリックしてもこのページには戻らない.現在のルーティングを置き換えた履歴を実行します

タイプ:boolean

デフォルト:false

this.$router.push({path: '/home', replace: true})
//              ：

//    :
router.replace(...)

 
総合事例

let queryData = {
  id: this.groupID,
  name: this.groupName,
  tags: 30
}
this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});