So erstellen Sie zwei geteilte Bildschirme in Vue

Vue ist ein beliebtes JavaScript-Framework, mit dem dynamische Single-Page-Webanwendungen erstellt werden können. Die Kernkomponente der Ansichtsebene, Vue.js, kann Ihnen dabei helfen, einfach zu wartende Anwendungen zu erstellen und gleichzeitig die Benutzerinteraktion und komplexe UI-Komponenten besser zu handhaben. In den meisten einseitigen Anwendungen müssen Geschäftsfunktionen zur Anzeige in mehrere Seiten unterteilt werden, und es ist auch ein gewisser Vergleich oder eine Analyse der Informationen erforderlich. Zu diesem Zeitpunkt ist es sehr wichtig, die Split-Screen-Funktion zu verwenden. In diesem Artikel erfahren Sie, wie Sie mit der offiziell empfohlenen Methode von Vue zwei geteilte Bildschirme in einem Vue-Projekt implementieren.

1. Verwenden Sie Vue-Router in Kombination mit Ansichtskomponenten, um einen geteilten Bildschirm zu erreichen.

Installieren Sie zunächst Vue-Router (kann über npm install vue-router installiert werden). Vue-Router ist der offizielle Routing-Manager für Vue.js. Es ist tief in den Kern von Vue.js integriert und erleichtert so die Erstellung von Single-Page-Anwendungen. Im Folgenden sind die Schritte aufgeführt, um mit Vue-Router einen geteilten Bildschirm zu implementieren: npm install vue-router进行安装）。Vue-Router是Vue.js官方路由管理器。它与Vue.js的核心深度集成，让构建单页应用变得更加容易。下面是使用Vue-Router实现分屏的步骤：

1. 创建Vue项目

在命令行中输入以下命令，创建一个新的Vue项目：

vue create my-project

这里假设您已经按照Vue.js的官方文档安装好了Vue.js。

2. 创建两个视图组件

在您的工程中，创建两个新的Vue组件，分别为 LeftPane.vue 和 RightPane.vue。这两个组件将作为分屏视图组件，每个组件将展示一部分应用程序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>

这里的样式可以根据自己的实际需求进行调整。

3. 创建路由配置

在您的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将会根据不同的路由规则来显示不同的分屏组件。

4. 在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 作为参数传递到该组件中。这样您就可以在应用程序中使用路由功能。

5. 挂载路由视图

最后一步是在 App.vue 中挂载路由视图，这将会在您的应用程序中实现分屏功能。代码示例如下：

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

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

这里的 router-view 将会显示 LeftPane.vue 或者 RightPane.vue ，具体取决于路由规则和用户的点击。

二、使用Vue-Router结合命名视图实现分屏

除了上文介绍的方法，Vue-Router还支持使用命名视图来实现分屏功能。这种方法可以允许您在同一个路由规则下同时显示多个视图组件，达到分屏的效果。下面是使用命名视图实现分屏的步骤：

1. 创建命名视图

在您的 App.vue 中，创建两个命名视图，分别为 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

1. Vue-Projekt erstellen

Geben Sie den folgenden Befehl in der Befehlszeile ein, um ein neues Vue-Projekt zu erstellen:

rrreee

hier Es wird davon ausgegangen, dass Sie Vue.js gemäß der offiziellen Dokumentation von Vue.js installiert haben.

2. Erstellen Sie zwei Ansichtskomponenten

Erstellen Sie in Ihrem Projekt zwei neue Vue-Komponenten, nämlich LeftPane.vue code> und <code> RightPane.vue. Diese beiden Komponenten dienen als Komponenten für die geteilte Bildschirmansicht und jede Komponente stellt einen Teil der Benutzeroberfläche und Funktionalität der Anwendung dar. 🎜🎜Der Beispielcode kann wie folgt referenziert werden: 🎜🎜LeftPane.vue: 🎜rrreee🎜RightPane.vue: 🎜rrreee🎜Die Stile hier können an Ihre tatsächlichen Bedürfnisse angepasst werden. 🎜

3. Routing-Konfiguration erstellen

🎜Erstellen Sie in Ihrer Vue-Anwendung einen neuen Ordner router. Erstellen Sie in diesem Ordner eine Datei index.js, um die Routing-Konfiguration zu definieren. Der Beispielcode lautet wie folgt: 🎜rrreee🎜Hier müssen Sie LeftPane.vue und RightPane.vue in die Routing-Datei einfügen und die Routing-Regeln definieren. Auf diese Weise zeigt Vue-Router beim Umschalten des Routings der Anwendung verschiedene Split-Screen-Komponenten gemäß unterschiedlichen Routing-Regeln an. 🎜

4. Konfigurieren Sie das Routing in der Vue-Root-Instanz

🎜Suchen Sie nach dem Import von Vue.js die Datei main.js Ihres Projekts , der Code lautet wie folgt: 🎜rrreee🎜In diesem Code konfigurieren Sie die App-Komponente als Vue-Root-Instanz und übergeben router als Parameter an die Komponente. Dadurch können Sie die Routing-Funktionalität in Ihrer Anwendung nutzen. 🎜

5. Routing-Ansicht bereitstellen

🎜Der letzte Schritt besteht darin, die Routing-Ansicht in App.vue bereitzustellen, wodurch ein geteilter Bildschirm implementiert wird Funktionalität in Ihrer Anwendung. Das Codebeispiel lautet wie folgt: 🎜rrreee🎜Die router-view hier zeigt entweder LeftPane.vue oder RightPane.vue an, je nachdem Routing-Regeln und Benutzerklicks. 🎜🎜2. Verwenden Sie Vue-Router in Kombination mit benannten Ansichten, um Split-Screen zu implementieren. 🎜🎜 Zusätzlich zu den oben vorgestellten Methoden unterstützt Vue-Router auch die Verwendung benannter Ansichten, um Split-Screen-Funktionalität zu implementieren. Mit dieser Methode können Sie mehrere Ansichtskomponenten gleichzeitig unter derselben Routing-Regel anzeigen, um einen Split-Screen-Effekt zu erzielen. Hier sind die Schritte zum Implementieren eines geteilten Bildschirms mit benannten Ansichten: 🎜

1. Benannte Ansichten erstellen

🎜Erstellen Sie in Ihrer App.vue jeweils zwei benannte Ansichten links und rechts. Der Beispielcode lautet wie folgt: 🎜rrreee🎜Die router-view-Komponenten heißen hier jeweils left und right und werden in geladen Anwendung gleichzeitig auf der Hauptseite. 🎜

2. Routing-Konfiguration ändern

🎜Ändern Sie in der Routing-Konfigurationsdatei die Routing-Regeln, um die beiden Komponenten gleichzeitig unter derselben Regel anzuzeigen. Der Beispielcode lautet wie folgt: 🎜rrreee🎜Hier wird die Routing-Regel in Pfad: '/', Komponenten: geändert. Gleichzeitig werden nach dieser Regel die Komponenten LeftPane.vue und RightPane.vue als left und rightbezeichnet > bzw. . Auf diese Weise werden beide Komponenten auf der Hauptseite der Anwendung angezeigt, wenn der Benutzer den Stammpfad der Anwendung aufruft. 🎜🎜Zusammenfassung🎜🎜Oben erfahren Sie, wie Sie die Split-Screen-Funktion in Vue anwenden. Der Split-Screen-Effekt kann durch die Verwendung von Vue-Router in Kombination mit Ansichtskomponenten oder benannten Ansichten erzielt werden. Die Auswahl verschiedener Methoden zur Implementierung der Split-Screen-Funktion im Projekt entsprechend den tatsächlichen Anforderungen trägt dazu bei, das Benutzererlebnis und die Benutzerfreundlichkeit der Anwendung zu verbessern. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie zwei geteilte Bildschirme in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!