javascript - Can anyone explain to me the difference and applicable scenarios between routers and components in vue?

Question

I wrote a single file component. In vue format, you can add multiple components to a <template> through the router. However, it seems that you can only add one to <template>. What if I have multiple vue files? Does it take routing to put together a complete page? What is the meaning of <template>?

Answer 1

components are created and mounted

Answer 2

The app.vue file of a certain project:

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

You can put multiple components in the template
The meaning of router is that different URLs use different components and pass different data

vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. Vue's single-page application is based on routing and components. Routing is used to set access paths and map paths and components. Traditional page applications use some hyperlinks to achieve page switching and jumps. In the vue-router single-page application, it is switching between paths, that is, switching of components.