vue-router がパラメータを渡す方法の詳細な説明

開発プロジェクトで、ページにジャンプするためにパラメータを運ぶ必要がある場合は、メモを取りましょう

方法 1. (Params は値を渡す)

メインページのジャンプ方法は以下の通りです

toEditInfo() {
  this.$router.push({
       path: '/XXX/XXX',
       params:{
            edit:true
          }
    });
}

対象ページのメソッドはこちら

created(){
    this.editStatus =  this.$route.query.params;
    console.log('editStatus',this.editStatus )
}

ヒント: このメソッドで渡された値はアドレス バーには表示されませんが、ページが更新されるとデータは消えます。

-------------------------------------------------- -------------------------------------------------- ------------------------

 方法 2. (クエリパス値)

メインページのジャンプ方法は以下の通りです

toEditInfo() {
  this.$router.push({
       path: '/XXX/XXX',
       query:{
            edit:true
          }
    });
}

対象ページのメソッドはこちら

created(){
    this.editStatus =  this.$route.query.edit;
    console.log('editStatus ',this.editStatus )
}

ヒント: このメソッドによって渡された値はアドレス バーに表示され、ページが更新されてもデータは消えません。

-------------------------------------------------- -------------------------------------------------- ------------------------

方法 3. (動的ルート スプライシング)

メインページのジャンプ方法は以下の通りです

toEditInfo() {
  this.$router.push({
       path: '/XXX/XXX/true'
    });
}

対象ページのメソッドはこちら

created(){
    this.editStatus =  this.$route.params.edit;
    console.log('editStatus ',this.editStatus )
}

このアプローチではルートを変更する必要があります

routes: [
    {
      path: '/XXX/XXX/:edit',
      name: 'auth',
      component:Auth
    }
  ]

ヒント: このメソッドによって渡された値はアドレス バーに表示され、ページが更新されてもデータは消えません。

キーポイント キーポイント:

データを取得するときはルーターではなくルートです。！！！！

この記事が役に立ったら、「いいね」をお願いします~