vuejsでページジャンプを実装する方法

ページ ジャンプを実装する Vuejs メソッド: 1. "..." ステートメントを使用します。 2. "this" を使用します。 .$router.push({path: 'ページ URL アドレス' })」ステートメント。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue ルーティングでページ ジャンプを実装する 2 つの方法 (ルーターリンクと JS)

1. 実装

このコンポーネントは、ナビゲーション リンクを設定し、さまざまな HTML コンテンツを切り替えるために使用されます

使用法:

• 簡単な書き方

<router-link to="demo2">demo2</router-link>

• ##v-bind の書き方

<router-link :to="&#39;demo2&#39;">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: &#39;demo2&#39; }">demo2</router-link>

• パラメータの書き方

<router-link :to="{ name: &#39;demo2&#39;, params: { userId: 123 }}">demo2</router-link>

ここにパラメータを渡すには、

で行う必要があります。 router.js でデモ 2 のパスを構成し、次のように、パス内のデモ 2 の後にワイルドカードを追加し、対応する userId を追加します。設定が完了すると、ページが表示されます。 ジャンプの結果は /demo2/123

ここでの「123」は上記の

userId## です。 #それでは、新しいページに追加するにはどうすればよいでしょうか? 渡されたパラメータ

userId

を取得するのはどうでしょうか? mounted

フックで

this.$route.params.xx を使用し、次のように渡されたパラメーターを取得します:

{
  path: '/demo2/:userId',
  name: 'demo2',
  component: demo2
  },

受信アドレスのキーと値のペア

mounted () {
    alert(this.$route.params.userId)
}
// 弹出123

• ページ ジャンプの結果は

  /demo2?plan=private

(

router.js

でパスを設定する必要はないことに注意してください)

新しいページで渡されたアドレスのキーと値のペアのプランを取得するには、 mounted

フックで

this.$route.plan.xx を使用し、次のように、渡されたアドレスのキーと値のペアを取得します:

<router-link :to="{ path: &#39;demo2&#39;, query: { plan: &#39;private&#39; }}">demo2</router-link>

2、JS を通じて実装 ---this.$router.push()テンプレート部分:

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

スクリプト部分:

(注: ここがルーター、上がルートです)

簡単な書き方

<button @click="toURL">跳转页面</button>

• パラメータの受け渡し 書き方

methods:{
  toURL(){
      this.$router.push({ path: '/demo2' })
  }
}

• 受信アドレスのキーと値のペア

methods:{
  toURL(){
      this.$router.push({ name: 'demo2', params: { userId: 123 }})
  }
}

関連する推奨事項：《
• vue.js チュートリアル

  》

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