新しいページをvueレイアウトで表示する方法

Vue フレームワークの人気により、ますます多くの Web 開発者が Vue フレームワークを使用して包括的な Web アプリケーションを開発し始めています。 Vue のドキュメントとコミュニティも、Vue ユーザーの変化するニーズを満たすために常に進化しています。ただし、Vue で完全なレイアウトを実装したいと考えている人にとって、最も一般的な質問は、新しいページをレイアウトに表示する方法です。この問題が発生した場合でも、心配する必要はありません。この記事ではそれを解決するいくつかの方法を紹介します。

Vue.js では、コンポーネント、テンプレート、ルーティングなど、多くの概念が使用されます。これらの概念により、Vue 開発は非常に柔軟で保守が容易になります。ページ レイアウトについては、Vue がコンセプト レイアウトを提供します。レイアウトは、ヘッダー、サイドバー、下部、メインコンテンツ領域などのページレイアウトを定義するために使用されるコンポーネントです。 Vue では、レイアウトは通常、App.vue コンポーネントまたは同様のルート コンポーネントに配置され、他の子コンポーネントが含まれます。

従来の Web アプリケーションでは、リンクをクリックするかフォームを送信すると、サーバーによって新しいページが表示されます。ただし、Vue では通常、Vue ルーターを使用します。 Vue Router は、アプリケーション内のすべての可能なパスと、これらのパスに対応するコンポーネントを定義できるツールです。これは、単に新しい HTML ページをロードするのではなく、Vue Router を利用して Vue アプリケーション内の任意のコンポーネントを開くことができることを意味します。

ここでは、新しいコンポーネントを開くための Vue ルーター メソッドをいくつか紹介します:

1. router.push()

router.push() メソッドを使用すると、次のコンポーネントを開くことができます。リンクをクリックするのと同様に、あるコンポーネントから別のコンポーネントに遷移します。例:

this.$router.push('/dashboard');

これにより、「Dashboard」という名前のコンポーネントに移動します。

2. router.replace()

router.replace() メソッドを使用すると、新しい履歴項目を追加せずに、現在のルーティング履歴内のレコードを置き換えることができます。例:

this.$router.replace('/dashboard');

これにより、「ダッシュボード」という名前のコンポーネントに移動し、現在のルート履歴項目が置き換えられます。

3. router.go()

router.go() メソッドを使用すると、履歴内の指定されたステップ数を前後に移動できます。例:

this.$router.go(-1);

これは歴史を 1 つ前に戻します。

Vue ルーターでこれらのメソッドを使用して、レイアウトで新しいコンポーネントを開きます。レイアウト コンポーネントにルート ビューを定義して、レイアウト ビューにコンポーネントを表示できます。このアプローチを使用すると、すべての新しいページがレイアウト内で開かれるようになります。

以下は、レイアウト コンポーネント、メイン ビュー、およびルート ビューを含むサンプル .vue ファイルのコードです:

<template>
  <div id="app">
    <layout>
      <router-view />
    </layout>
  </div>
</template>

<script>
import Layout from './components/Layout.vue';

export default {
  components: {
    Layout
  },
};
</script>

上記のコードでは、最初にレイアウト コンポーネントをインポートし、次に、それをテンプレートで定義します。定義ではルート ビューも使用します。このビューはコンポーネント内で開かれます。

ルーターでパスをより明確に定義するには、ルーター オブジェクトに次のコードを含める必要があります:

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/dashboard',
      component: Dashboard
    }
  ]
});

上記では、2 つのパスを定義しました。1 つは /、もう 1 つは is/dashboard です。ユーザーが URL にアクセスすると、ルーターは、ユーザーがアクセスした URL に応じて、ホーム コンポーネントまたはダッシュボード コンポーネントのいずれかを開きます。

完全な Vue アプリケーションでは、上記のように他のコンポーネントをレイアウトに追加できます。

概要

Vue JS では、Layout コンポーネントは Web ページ内に要素を合理的に分散する方法です。 Vue ルーターのメソッドを使用すると、新しいコンポーネントを別のページにロードするのではなく、Layout コンポーネント内で開くことができます。これにより、ページの切り替えが大幅に高速化され、Web アプリケーションのユーザー エクスペリエンスが向上します。上記の問題を解決すれば、高品質な Vue アプリケーションを迅速に開発できるようになると思います。

以上が新しいページをvueレイアウトで表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。