Comment créer deux écrans partagés en vue

Vue est un framework JavaScript populaire qui peut être utilisé pour créer des applications Web dynamiques d'une seule page. Le composant principal de la couche d'affichage, Vue.js, peut vous aider à créer des applications faciles à maintenir tout en vous permettant également de mieux gérer l'interaction utilisateur et les composants d'interface utilisateur complexes. Dans la plupart des applications à page unique, les fonctions commerciales doivent être divisées en plusieurs pages pour être affichées, et une certaine comparaison ou analyse des informations est également requise. À ce stade, il est très important d'utiliser la fonction d'écran partagé. Cet article vous expliquera comment implémenter deux écrans partagés dans un projet Vue en utilisant la méthode officiellement recommandée de Vue.

1. Utilisez Vue-Router combiné avec des composants de vue pour obtenir un écran partagé

Tout d'abord, installez Vue-Router (vous pouvez passer npm install vue-router code> à installer). Vue-Router est le gestionnaire de routage officiel de Vue.js. Il est profondément intégré au cœur de Vue.js, ce qui facilite la création d'applications d'une seule page. Voici les étapes pour utiliser Vue-Router pour implémenter l'écran partagé : <code>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. Créer un projet Vue

Entrez la commande suivante sur la ligne de commande pour créer un nouveau projet Vue :

rrreee

On suppose que vous avez installé Vue.js selon la documentation officielle de Vue.js.

2. Créez deux composants de vue

Dans votre projet, créez deux nouveaux composants Vue, respectivement LeftPane.vue code> et <code>RightPane.vue. Ces deux composants serviront de composants d'affichage en écran partagé, et chaque composant présentera une partie de l'interface utilisateur et des fonctionnalités de l'application. #🎜🎜##🎜🎜#L'exemple de code peut être référencé comme suit : #🎜🎜##🎜🎜#LeftPane.vue : #🎜🎜#rrreee#🎜🎜#RightPane.vue : #🎜🎜#rrreee#🎜🎜 #Ici Le style peut être ajusté en fonction de vos besoins réels. #🎜🎜#

3. Créer une configuration de routage

#🎜🎜#Dans votre application Vue, créez un nouveau dossier router code>. Créez un fichier <code>index.js dans ce dossier pour définir la configuration du routage. L'exemple de code est le suivant : #🎜🎜#rrreee#🎜🎜#Ici, vous devez introduire LeftPane.vue et RightPane.vue dans le fichier de routage et définir le règles de routage. De cette façon, lorsque le routage de l'application change, Vue-Router affichera différents composants en écran partagé selon différentes règles de routage. #🎜🎜#

4. Configurer le routage dans l'instance racine de Vue

#🎜🎜#Trouver le fichier main.js de votre projet , Après avoir importé Vue.js, le code est le suivant : #🎜🎜#rrreee#🎜🎜#Dans ce code, vous configurerez le composant App comme instance racine de Vue et définirez le router est passé dans le composant en tant que paramètre. Cela vous permet d'utiliser la fonctionnalité de routage dans votre application. #🎜🎜#

5. Monter la vue de routage

#🎜🎜#La dernière étape consiste à monter la vue de routage dans App.vue , qui activera la fonctionnalité d'écran partagé dans votre application. L'exemple de code est le suivant : #🎜🎜#rrreee#🎜🎜#La router-view ici affichera LeftPane.vue ou RightPane.vue, Dépend des règles de routage et des clics des utilisateurs. #🎜🎜##🎜🎜# 2. Utilisez Vue-Router combiné avec des vues nommées pour implémenter l'écran partagé #🎜🎜##🎜🎜# En plus des méthodes présentées ci-dessus, Vue-Router prend également en charge l'utilisation de vues nommées pour mettre en œuvre la fonctionnalité d’écran partagé. Cette méthode vous permet d'afficher plusieurs composants de vue en même temps sous la même règle de routage pour obtenir un effet d'écran partagé. Voici les étapes pour implémenter l'écran partagé à l'aide de vues nommées : #🎜🎜#

1. Créez une vue nommée

#🎜🎜#Dans votre App.vue , créez deux vues nommées, left et right. L'exemple de code est le suivant : #🎜🎜#rrreee#🎜🎜#Les composants router-view ici sont nommés respectivement gauche et droite, qui sera également chargé sur la page principale de l'application. #🎜🎜#

2. Modifier la configuration du routage

#🎜🎜#Dans le fichier de configuration du routage, modifiez les règles de routage pour permettre aux deux composants d'être affichés dans le même règle en même temps vers le bas. L'exemple de code est le suivant : #🎜🎜#rrreee#🎜🎜#Ici, la règle de routage est modifiée en chemin : '/', composants :. En même temps, selon cette règle, les composants LeftPane.vue et RightPane.vue sont nommés left et right respectivement. De cette façon, lorsque l'utilisateur visite le chemin racine de l'application, les deux composants seront affichés sur la page principale de l'application. #🎜🎜##🎜🎜#Résumé#🎜🎜##🎜🎜#Ce qui précède explique comment appliquer la fonction d'écran partagé dans Vue. L'effet d'écran partagé peut être obtenu en utilisant Vue-Router combiné avec des composants de vue ou des vues nommées. Choisir différentes méthodes pour mettre en œuvre la fonction d'écran partagé en fonction des besoins réels du projet contribuera à améliorer l'expérience utilisateur et la facilité d'utilisation de l'application. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!