javascript - Quelqu'un peut-il m'expliquer la différence et les scénarios applicables entre les routeurs et les composants dans Vue ?

Question

J'ai écrit un seul composant de fichier. Au format vue, vous pouvez ajouter plusieurs composants à un <modèle>. Cependant, il semble que vous ne puissiez en ajouter qu'un seul à <template>. Je peux les assembler. La page complète doit-elle être acheminée ? Quelle est la signification de <template> ?

Answer 1

les composants sont créés et montés

Answer 2

Le fichier app.vue d'un certain projet :

<template>
  <p id="app">
    //在这里调用你的组件
    <TopContainer></TopContainer>
    <BHeader></BHeader>
    <BContent :rows="rows"></BContent>
    <BNavSide :options="options" v-on:change="isShowMask"></BNavSide>
    <p class="wnd-mask" ref="mask" v-show="showMask"></p>
  </p>
</template>

<script>

//在这里import组件

import TopContainer from 'components/common/TopContainer.vue'
import BHeader from 'components/common/BHeader.vue'
import BContent from 'components/content/BContent.vue'
import BNavSide from 'components/nav/BNavSide'
import { mapGetters } from 'vuex'
export default {
  name: 'app',

  //在这里写用到的组件

  components: {
    TopContainer,
    BHeader,
    BContent,
    BNavSide
  }
}
</script>

Vous pouvez mettre plusieurs composants dans le modèle
La signification du routeur est que différentes URL utilisent différents composants et transmettent des données différentes

vue-router est le plug-in de routage officiel de Vue.js. Il est profondément intégré à vue.js et convient à la création d'applications d'une seule page. L'application monopage de Vue est basée sur le routage et les composants. Le routage est utilisé pour définir les chemins d'accès et cartographier les chemins et les composants. Les applications de pages traditionnelles utilisent certains hyperliens pour effectuer des changements de page et des sauts. Dans l'application monopage vue-router, il s'agit de basculer entre les chemins, c'est-à-dire de changer de composants.