javascript - 谁能给我解释一下vue中的router和组件的区别和适用情景？

Question

我写了一个单文件组件.vue格式的 可以同过router在一个<template>中添加多个组件 但是在<template>中好像只能添加一个 那我要是有多个vue文件相拼一个完整页面 是要都是路由来做吗 ，¬<template>的意义是什么呢？

Answer 1

components组建进行挂载

Answer 2

某个项目的app.vue文件:

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

template里可以放多个组件
router的意义在于不同的URL使用不同的组件，传递不同的数据

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。