vueで2分割画面を作る方法

Vue は、動的な単一ページ Web アプリケーションの構築に使用できる人気のある JavaScript フレームワークです。ビュー レイヤーのコア コンポーネントである Vue.js は、メンテナンスが簡単なアプリケーションの構築に役立つと同時に、ユーザー インタラクションや複雑な UI コンポーネントをより適切に処理できるようにします。単一ページのアプリケーションでは、ビジネス機能を複数のページに分割して表示する必要があり、情報の比較や分析も必要になるため、このとき分割画面機能を使用することが非常に重要です。この記事では、Vue の公式推奨方法を使用して、Vue プロジェクトに 2 つの分割画面を実装する方法を説明します。

1. Vue-Router をビュー コンポーネントと組み合わせて使用​​し、分割画面を実現します

まず、Vue-Router をインストールします (npm install vue-router を通じてインストールできます)。 Vue-Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js のコアと深く統合されているため、単一ページのアプリケーションを簡単に構築できます。 Vue-Router を使用して分割画面を実装する手順は次のとおりです。

1. Vue プロジェクトの作成

コマンド ラインに次のコマンドを入力して、新しい Vue を作成します。 project:

vue create my-project

Vue.js の公式ドキュメントに従って Vue.js がインストールされていることを前提としています。

2. 2 つのビュー コンポーネントの作成

プロジェクトで、LeftPane.vue と RightPane.vue# という 2 つの新しい Vue コンポーネントを作成します。 ##。これら 2 つのコンポーネントは分割画面ビュー コンポーネントとして機能し、各コンポーネントはアプリケーションの UI と機能の一部を表示します。

サンプル コードは次のように参照できます。

LeftPane.vue:

<template>
  <div class="left-pane">
    <h3>左侧面板</h3>
    <!-- 添加具体的内容 -->
  </div>
</template>

<script>
export default {
  name: 'LeftPane'
  // 添加其他逻辑
}
</script>

<style scoped>
.left-pane {
  width: 50%;
  float: left;
}
</style>

RightPane.vue:

<template>
  <div class="right-pane">
    <h3>右侧面板</h3>
    <!-- 添加具体的内容 -->
  </div>
</template>

<script>
export default {
  name: 'RightPane'
  // 添加其他逻辑
}
</script>

<style scoped>
.right-pane {
  width: 50%;
  float: right;
}
</style>

ここのスタイルはカスタマイズできます。実際のニーズに応じて調整します。

ルーティング構成の作成

Vue アプリケーションで、新しいフォルダー

router を作成します。このフォルダーの下にファイル index.js を作成して、ルーティング構成を定義します。サンプル コードは次のとおりです。

import Vue from 'vue'
import VueRouter from 'vue-router'

import LeftPane from '@/components/LeftPane.vue'
import RightPane from '@/components/RightPane.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/left', component: LeftPane },
  { path: '/right', component: RightPane }
]

const router = new VueRouter({
  routes
})

export default router

ここでは、

LeftPane.vue と RightPane.vue をルーティング ファイルに導入し、ルーティング ルールを定義する必要があります。このように、アプリケーションのルーティングが切り替わると、Vue-Router は異なるルーティング ルールに従って異なる分割画面コンポーネントを表示します。

Vue ルート インスタンスでルーティングを構成する

プロジェクトの

main.js ファイルを見つけます。Vue.js をインポートした後のコードは次のようになります。次のように:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

このコードでは、

App コンポーネントを Vue ルート インスタンスとして設定し、パラメータとして router をコンポーネントに渡します。これにより、アプリケーションでルーティング機能を使用できるようになります。

ルート ビューのマウント

最後のステップは、アプリケーションにある

App.vue にルート ビューをマウントすることです。分割を実装します。画面機能。コード例は次のとおりです。

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

<script>
export default {
  name: 'App',
  // 添加其他逻辑
}
</script>

ここの

router-view には、設定に応じて LeftPane.vue または RightPane.vue が表示されます。ルーティング ルールとユーザーのクリック。

2. Vue-Router を名前付きビューと組み合わせて使用​​して分割画面を実装する

上で紹介した方法に加えて、Vue-Router は分割画面を実装するための名前付きビューの使用もサポートしています機能性。この方法を使用すると、同じルーティング ルールの下で複数のビュー コンポーネントを同時に表示して、分割画面効果を実現できます。名前付きビューを使用して分割画面を実装する手順は次のとおりです。

名前付きビューの作成

App.vue で、2 つの名前付きビューを作成します。 、それぞれ left と right。サンプル コードは次のとおりです。

<template>
  <div id="app">
    <router-view name="left"></router-view>
    <router-view name="right"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
  // 添加其他逻辑
}
</script>

ここの

router-view コンポーネントは、それぞれ left と right という名前が付けられ、次のようにロードされます。メインページで同時にアプリケーションを実行します。

ルーティング構成の変更

ルーティング構成ファイルで、2 つのコンポーネントが同じルールの下で同時に表示されるようにルーティング ルールを変更します。サンプル コードは次のとおりです。

import Vue from 'vue'
import VueRouter from 'vue-router'

import LeftPane from '@/components/LeftPane.vue'
import RightPane from '@/components/RightPane.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    components: {
      left: LeftPane,
      right: RightPane
    }
  }
]

const router = new VueRouter({
  routes
})

export default router

ここでは、ルーティング ルールが

path: '/'、components: に変更されています。また、このルールでは、LeftPane.vue コンポーネントと RightPane.vue コンポーネントの名前は、それぞれ left と right になります。このようにして、ユーザーがアプリケーションのルート パスにアクセスすると、両方のコンポーネントがアプリケーションのメイン ページに表示されます。

まとめ

以上は Vue で画面分割機能を適用する方法です。分割画面効果は、Vue-Router をビュー コンポーネントまたは名前付きビューと組み合わせて使用​​することで実現できます。実際のニーズに応じてプロジェクトに分割画面機能を実装するためのさまざまな方法を選択すると、アプリケーションのユーザー エクスペリエンスと使いやすさが向上します。

以上がvueで2分割画面を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。