搜尋

首頁  >  問答  >  主體

javascript - 誰能給我解釋一下vue中的router和組件的區別和適用情景?

我寫了一個單文件組件.vue格式的可以同過router在一個<template>中添加多個組件但是在<template>中好像只能添加一個那我要是有多個vue文件相拼一個完整頁面是要都是路由來做嗎,¬<template>的意義是什麼呢?

黄舟黄舟2862 天前561

全部回覆(2)我來回復

  • 黄舟

    黄舟2017-05-19 10:27:26

    components組成進行掛載

    回覆
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:27:26

    某個專案的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單一頁面應用程式中,則是路徑之間的切換,也就是元件的切換。

    回覆
    0
  • 取消回覆