vue에서 두 개의 분할 화면을 만드는 방법

Vue는 동적 단일 페이지 웹 애플리케이션을 구축하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. 뷰 계층의 핵심 구성 요소인 Vue.js를 사용하면 유지 관리가 쉬운 애플리케이션을 구축하는 동시에 사용자 상호 작용 및 복잡한 UI 구성 요소를 더 잘 처리할 수 있습니다. 대부분의 단일 페이지 애플리케이션에서는 비즈니스 기능을 여러 페이지로 나누어 표시해야 하며, 이때 정보의 비교나 분석도 필요합니다. 이때 분할 화면 기능을 사용하는 것이 매우 중요합니다. 이 글에서는 공식적으로 권장되는 Vue 방법을 사용하여 Vue 프로젝트에서 두 개의 분할 화면을 구현하는 방법을 설명합니다.

1. 분할 화면을 구현하려면 뷰 구성 요소와 결합된 Vue-Router를 사용하세요

먼저 Vue-Router를 설치합니다(npm install vue-router를 통해 설치 가능). Vue-Router는 Vue.js의 공식 라우팅 관리자입니다. Vue.js의 핵심과 긴밀하게 통합되어 단일 페이지 애플리케이션을 더 쉽게 구축할 수 있습니다. 다음은 Vue-Router를 사용하여 분할 화면을 구현하는 단계입니다. 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 프로젝트 만들기

새 Vue 프로젝트를 만들려면 명령줄에 다음 명령을 입력하세요.

rrreee

여기 Vue.js 공식 문서에 따라 Vue.js를 설치했다고 가정합니다.

2. 두 개의 뷰 구성 요소 만들기

프로젝트에서 두 개의 새로운 Vue 구성 요소, 즉 LeftPane.vue code> 및 <code>를 만듭니다. RightPane.vue. 이 두 구성 요소는 분할 화면 보기 구성 요소로 사용되며 각 구성 요소는 애플리케이션 UI 및 기능의 일부를 보여줍니다. 🎜🎜샘플 코드는 다음과 같이 참조할 수 있습니다. 🎜🎜LeftPane.vue: 🎜rrreee🎜RightPane.vue: 🎜rrreee🎜여기의 스타일은 실제 필요에 따라 조정될 수 있습니다. 🎜

3. 라우팅 구성 만들기

🎜Vue 애플리케이션에서 새 폴더 router를 만듭니다. 라우팅 구성을 정의하려면 이 폴더에 index.js 파일을 생성하세요. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜여기서 라우팅 파일에 LeftPane.vue 및 RightPane.vue를 도입하고 라우팅 규칙을 정의해야 합니다. 이러한 방식으로 애플리케이션의 라우팅이 전환되면 Vue-Router는 다양한 라우팅 규칙에 따라 다양한 분할 화면 구성 요소를 표시합니다. 🎜

4. Vue 루트 인스턴스에서 라우팅 구성

🎜Vue.js를 가져온 후 프로젝트의 main.js 파일을 찾으세요. 🎜rrreee🎜이 코드에서는 App 구성 요소를 Vue 루트 인스턴스로 구성하고 router를 매개 변수로 구성 요소에 전달합니다. 이를 통해 애플리케이션에서 라우팅 기능을 사용할 수 있습니다. 🎜

5. 라우팅 뷰 마운트

🎜마지막 단계는 분할 화면을 구현할 App.vue에 라우팅 뷰를 마운트하는 것입니다. 귀하의 응용 프로그램의 기능. 코드 예는 다음과 같습니다. 🎜rrreee🎜여기의 router-view에는 라우팅에 따라 LeftPane.vue 또는 RightPane.vue가 표시됩니다. 규칙 및 사용자 클릭. 🎜🎜2. 명명된 뷰와 결합된 Vue-Router를 사용하여 분할 화면 구현🎜🎜위에 소개된 방법 외에도 Vue-Router는 명명된 뷰를 사용하여 분할 화면 기능을 구현하는 것도 지원합니다. 이 방법을 사용하면 동일한 라우팅 규칙에 따라 여러 보기 구성 요소를 동시에 표시하여 분할 화면 효과를 얻을 수 있습니다. 명명된 뷰를 사용하여 분할 화면을 구현하는 단계는 다음과 같습니다. 🎜

1. 명명된 뷰 생성

🎜 App.vue에서 각각 두 개의 명명된 뷰를 생성합니다. 왼쪽 및 오른쪽. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜여기서 router-view 구성 요소의 이름은 각각 left 및 right이며 메인페이지에서 동시에 신청하세요. 🎜

2. 라우팅 구성 수정

🎜라우팅 구성 파일에서 두 구성 요소가 동시에 동일한 규칙 아래에 표시되도록 라우팅 규칙을 수정합니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜여기서 라우팅 규칙을 경로: '/', 구성 요소:로 수정합니다. 동시에 이 규칙에 따라 LeftPane.vue 및 RightPane.vue 구성 요소의 이름은 left 및 right입니다. > 각각 . 이렇게 하면 사용자가 애플리케이션의 루트 경로를 방문할 때 두 구성 요소가 모두 애플리케이션의 기본 페이지에 표시됩니다. 🎜🎜요약🎜🎜위는 Vue에서 화면 분할 기능을 적용하는 방법입니다. 분할 화면 효과는 뷰 구성 요소 또는 명명된 뷰와 결합된 Vue-Router를 사용하여 얻을 수 있습니다. 실제 필요에 따라 프로젝트에서 분할 화면 기능을 구현하는 다양한 방법을 선택하면 사용자 경험과 애플리케이션 사용 편의성이 향상됩니다. 🎜

위 내용은 vue에서 두 개의 분할 화면을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!