komponen dibentuk dan dipasang

Fail app.vue projek tertentu:

<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>

Anda boleh meletakkan berbilang komponen dalam templat
Maksud penghala ialah URL yang berbeza menggunakan komponen yang berbeza dan menghantar data yang berbeza

vue-router ialah pemalam penghalaan rasmi Vue.js Ia disepadukan secara mendalam dengan vue.js dan sesuai untuk membina aplikasi satu halaman. Aplikasi satu halaman Vue adalah berdasarkan penghalaan dan Penghalaan digunakan untuk menetapkan laluan akses dan memetakan laluan dan komponen. Aplikasi halaman tradisional menggunakan beberapa hiperpautan untuk mencapai penukaran dan lompatan halaman. Dalam aplikasi halaman tunggal vue-router, ia bertukar antara laluan, iaitu menukar komponen.