vue.jsでジャンプページを作る方法

ジャンプ ページを実装するための Vue.js メソッド: 1. タグ [] を使用してジャンプします; 2. パラメーターが 1 つしかない場合は、[this.$router.push()] メソッドを使用します。ジャンプアドレスを指定し、値を渡すパラメータを追加することもできます。

[関連記事の推奨事項: vue.js]

#vue.方法js でページ ジャンプを実装するには:

下の本棚をクリックして対応するページにジャンプします

<router-link :to="{name: &#39;bookshelf&#39;, params: { entityId: this.entityId } }"
             :class="{&#39;flex-item-1&#39;:&#39;flex-item-1&#39;,cur:tabs[0].isShow}" href="javascript:">
              <span class="tabNav-ico tabNav-book"></span>
              <span class="tabNav-txt">书 架</span>
</router-link>

'name': 'bookshelf' はジャンプする Vue コンポーネントの名前を示します, name ルーターファイル配下のindex.vueに設定されます。

{
     path: '/bookshelf',
     name: 'bookshelf',
     component: Bookshelf
   },

params: {entityId: this.entityId} には、渡されるパラメーターが含まれます。

本棚コンポー​​ネントでパラメータを受け取る

this.bookshelfId = this.$route.params.entityId;

ラベル < を使用することに加えて、 router-link> ;ジャンプするには、次のメソッドを使用することもできます

<a @click="toIndex" :class="{&#39;flex-item-1&#39;:&#39;flex-item-1&#39;,cur:tabs[2].isShow}" href="javascript:">
      <span class="tabNav-ico tabNav-home"></span>
      <span class="tabNav-txt">首 页</span>
</a>
toIndex: function(){
        this.$router.push("/?entityId="+ localStorage.getItem("entityId"));
}

ページにジャンプすることもできます this.$router.push() メソッドのパラメータが 1 つだけの場合、ジャンプ アドレスを表します値を渡すパラメータを追加することもできます。

書き込み:

this.$router.push({name: "deepReadingDetail", params: {'id': data.id, 'title': data.title}});

パラメータの受信:

this.$route.params.title

##関連する無料学習 推奨:

javascript(ビデオ)

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