Vueで別のページにジャンプする方法

別のページにジャンプする vue の実装方法: 1. a タグにジャンプ関数を追加; 2. $router にジャンプ URL を追加; 3. 「パス クエリ」の組み合わせを介してパラメーター。

この記事の動作環境: Windows7 システム、vue2.5.17 バージョン、DELL G3 コンピューター。

vue で別のページにジャンプするにはどうすればよいですか?

vue が 1 つのページから別のページにジャンプしてパラメータを運ぶためのソリューション

1. 要件:

をクリックします。コマーシャルリストにジャンプするモール

解決策:

メタページ:

a タグ ジャンプの追加関数

<a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo(&#39;M000989&#39;)"><i class="sIRicon"></i>商场</a>

  toMallInfo: function(mallCode){
    this.$router.push({
     path: '/propertyInfo/mall/mallList',
     // name: 'mallList',
     query: {
      mallCode: 'M000989'
     }
    })
   },

はジャンプ URL を $router に追加します。

パスの URL の先頭に / を追加するとルート ディレクトリにあることを意味し、追加されていない場合はサブルートになります。パス クエリ

##----

ページに移動してパラメータを受け取ります

 created(){
   this.getParams()
  },
methods :{getParams(){
    // 取到路由带过来的参数
    const routerParams = this.$route.query.mallCode
    // 将数据放在当前组件的数据内
    this.mallInfo.searchMap.mallCode = routerParams;
    this.keyupMallName()
   }
  }，
  watch: {
   '$route': 'getParams'
  }

解決策! ！ ！

推奨学習:「

vue チュートリアル

」

以上がVueで別のページにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。