Vueルーターでジャンプを実装する方法

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、開発者が Web アプリケーションをより迅速かつ簡単に開発できるようにするためのツールが多数提供されています。最も一般的に使用されるのは Vue Router です。 Vue Router は Vue.js の公式ルーティング マネージャーであり、SPA アプリケーション (シングル ページ アプリケーション) でコンポーネントの切り替えを簡単に実装できます。そこでこの記事では、Vue Router がどのようにジャンプを実装しているかを詳しく紹介します。

1. Vue Router の基本概念

Vue Router は、Vue.js をベースにした公式ルーティング マネージャーです。ルーティングによってさまざまなページコンポーネントを分離し、分離されたコンポーネントをより柔軟に管理および使用できます。その中で、Vue Router には次の重要な概念があります:

1. Route

Route はページのパスを表し、異なるルートにアクセスすると、異なるページやコンポーネントを表示できます。ルートには動的パラメータを含めることができ、これらのパラメータを使用してページの動作、コンポーネントの表示効果などを制御できます。

2. Router

Router は Vue.js のインスタンスで、ページ全体のルーティングを管理するために使用されます。ルーターを使用して、ルートを切り替えたり、ルート変更を監視したり、その他の操作を行うことができます。

3. ルーティング コンポーネント

ルーティング コンポーネントは、ログイン ページ、ホームページ、ユーザー ページなど、ルーティングに表示するさまざまなコンポーネントです。

4. ルーティング ビュー

ルーティング ビューは コンポーネントであり、その機能は、ルーティングが変更されたときに対応するコンポーネントを動的に表示することです。

2. Vue Router にジャンプする 3 つの方法

Vue Router では、次の 3 つの方法でジャンプできます:

1. 宣言型ナビゲーション

router-link タグを使用してジャンプを実現すると、ユーザーのクリックイベントをプログラム内のルーティング変換に変換できます。宣言型ナビゲーションを使用すると、URL の直接操作や タグの使用に伴う問題の一部が回避されます。

コード例:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

2. プログラムによるナビゲーション

イベント メソッドで $router オブジェクトを呼び出し、push または replace メソッドを使用して指定したページにジャンプします。プログラムによるナビゲーションを使用すると、ルート ジャンプの動作を簡単に制御でき、$route オブジェクトを使用してルート パラメーターにアクセスし、ジャンプ時に柔軟に処理できます。

コード例:

<template>
  <div>
    <button @click="toHome">to Home</button>
    <button @click="toAbout">to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    toHome(){
      this.$router.push('/')
    },
    toAbout(){
      this.$router.push('/about')
    }
  }
}
</script>

3. リダイレクト

リダイレクトとは、ルートが指定されたページにジャンプする前に別のページにジャンプすることを意味します。リダイレクト メソッドを使用してリダイレクトを実装すると、不要な中間ステップを省略して、必要なページに直接アクセスできます。

コード例:

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

3. Vue Router パラメーターの受け渡し

Web アプリケーションの開発では、さまざまなパラメーターに基づいてルート間でパラメーターを渡す必要があることがよくあります。異なるページ。 Vue Router では、動的ルーティングとクエリ パラメーターという 2 つの方法でルート間でパラメーターを渡すことができます。

1. 動的ルーティング

動的ルーティングとは、ルートに特定のパラメーターを追加し、これらのパラメーターを使用してページの動作を制御することを指します。ダイナミックルーティングのパラメータ送信方法は比較的柔軟であり、経路が変更された場合はいつでもパラメータ値を更新できます。

コード例:

// 配置路由
const router = new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'goods',
      component: () => import('@/views/Goods'),
    }
  ]
})

// 带参跳转
this.$router.push({
  name: 'goods',
  params: {
    id: 1
  }
})

// 获取参数值
this.$route.params.id

2. クエリ パラメータ

クエリ パラメータとは、?key=value を URL に追加して特定のパラメータを渡すことを指します。クエリパラメータを渡す方法は比較的単純で、パラメータ値は$routeオブジェクトを通じて取得および更新できます。

コード例:

// 获取参数值
this.$route.query.key

// 更新参数值
this.$router.push({
  path: '/test',
  query: {
    key: 'value'
  }
})

概要

この記事では主に、Vue Router の基本概念、ジャンプのルーティングの 3 つの方法、およびパラメーターの受け渡しの 2 つの方法を紹介します。実際のアプリケーションでは、さまざまなニーズに応じてさまざまな方法を使用してルーティングの制御と管理を実装できます。この記事での紹介が、Vue Router の使用方法を皆さんがよりよく理解するのに役立つことを願っています。

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