1. 使用 <component>標籤實現元件切換

　　<component> 是Vue提供的；有一個is屬性，is的作用就是顯示指定的元件

<template>
  <div>
    <h1>App根元件</h1>
    <div  @click="comName='my-home'">home</div>
    <div  @click="comName='my-movie'">movie</div>
    <div  @click
 
="comName='my-about'">about</div>
    <a href="#" @click.prevent="comName='my-home'">home</a>
    <a href="#" @click.prevent="comName='my-movie'">movie</a>
    <a href="#" @click.prevent="comName='my-about'">about</a>
    <!-- component 是由Vue官方提供的；作用，就是根據 is 屬性指定的名稱，來展示指定的元件 
 
-->
    <!-- 可以把 component 標籤，理解為 佔位符；指定什麼 名稱，就展示什麼元件 -->
    <component :is="comName"></component>
  </div>
</template>

<script>
// 匯入需要被按需展示的元件
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

export default {
  data() {
    
 
return {
      // 指定 在頁面上要展示的元件名稱， 預設展示首頁
      comName: 'my-home'
    }
  },
  // 註冊私有元件
  components: {
    'my-home': Home,
    'my-movie': Movie,
    'my-about': About
  }
}
</script>

2. SPA單頁應用

2.1 錨鏈接及常規url的區別

1. 普通的URL地址：會重新整理整個頁面；會追加瀏覽歷史記錄；

2. 錨鏈接：不會觸發頁面的整體重新整理；會追加瀏覽歷史記錄；（錨鏈接是頁面內的跳轉）

2.2 什麼是SPA,為什麼有SPA

• 概念定義：SPA英文全稱是Single Page Application, 中文翻譯是 “單頁面應用程式”；

• 通俗的理解是：只有一個Web頁面的網站；網站的所有功能都在這個唯一的頁面上進行展示與切換；

• 特點：

  • 只有一個頁面

  • 瀏覽器一開始請求這個頁面，必須載入對應的HTML， CSS， JavaScript

  • 使用者的所有操作，都在這唯一的頁面上完成

  • 頁面資料都是用Ajax請求回來的；

• 好處：

  • 實現了前後端分離開發；

  • 使用者體驗好、快，內容的改變不需要重新載入整個頁面；

• 缺點：

• 對SEO不是很友好，因為頁面資料是Ajax渲染出來的； 伺服器端渲染；

• 剛開始的時候載入速度可能比較慢；專案開發完畢之後，可以單獨對首屏頁面的載入時間做優化；

• 頁面複雜度比較高

2.3 原生實現SPA

　　使用 component 標籤的:is屬性來切換元件

　　總結：單頁面應用程式中，實現元件切換的根本技術點，就是 監聽 window.onhashchange 事件：只要瀏覽器監聽到 Hash 值的變化，就會觸發指定的事件處理函式

<template>
  <div>
    <h1>App根元件</h1>

    <a href="#/home">首頁</a>
    <a href="#/movie">電影</a>
    <a href="#/about">關於</a>

    <component :is="comName"></component>
  </div>
</template>

<script>
// 匯入需要的子元件
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

export default {
  data() {
    return {
      comName: 'my-home'
    }
  },
  created() {
    // 只要瀏覽器監聽到 Hash 值的變化，就會觸發指定的事件處理函式
    window.onhashchange = () => {
      const hashStr = window.location.hash.slice(1)
      switch (hashStr) {
        case '/home':
          this.comName = 'my-home'
          break
        case '/movie':
          this.comName = 'my-movie'
          break
        case '/about':
          this.comName = 'my-about'
          break
      }
    }
  },
  // 註冊私有子元件
  components: {
    'my-home': Home,
    'my-movie': Movie,
    'my-about': About
  }
}
</script>