vue-router 2.0常用基礎知識点のrouter.push()

2703 ワード

vue-router 2.0常用基礎知識点のrouter.push()
2017年04月01日09:31:01
読解数:82574
router.push(location)
http://www.jianshu.com/p/ee7ff3d1d93d
Aラベルを作成してナビゲーションリンクを定義する以外に、routerの実例的な方法を利用してコードを作成することによっても実現できます。router.push(location)は、異なるURLにナビゲートしたい場合は、router.push方法を使用します。この方法は、historyスタックに新しいレコードを追加しますので、ユーザがブラウザの後退ボタンをクリックすると、前のURLに戻ります。
クリックすると、この方法は内部で呼び出されますので、クリックするのはrouter.pushを呼び出すのと同じです。
ステートメント:プログラミング: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
    タイプ:bootleanのデフォルト値:falseがreplace属性を設定すると、クリックするとrouter.replace()を呼び出します。router.push()ではなく、ナビゲーション後にhistory記録を残しません。戻るボタンを押してもこのページには戻りません。//replace:trueを加えると、それはhistoryに新記録を追加するのではなく、その方法名と同じです。現在のhistory記録を差し替えます。
     
  • this.$router.push({path: '/home', replace: true})
  • // :
  • // :
  • router.replace(...)
  • 総合判例
    this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});