Vue-router（1）之component標簽

1. 使用 <component>標簽實現組件切換

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

<template>
  <div class="detail">
    <p>父組件</p>
    <hr>
    <button  @click="componentName='my-son1'">首頁</button>
    <button  @click="componentName='my-son2'">電影</button>
    <button  @click="componentName='my-son3'">關於</button>
    <hr>
    <component :is="componentName"></component>
  </div>
</template>

<script>
import son1 from './son1.vue'
import son2 from './son2.vue'
import son3 from './son3.vue'
export default {
  name: "order",
  components: {
    'my-son1': son1,
    'my-son2': son2,
    'my-son3': son3
  },
  data() {
    return {
      componentName: 'my-son1' // 默認展示第一個子組件
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  margin: 5px;
  padding: 10px;
  border: 2px dashed salmon;
  height: 200px;
  background-color: #f6f6f6;
  p {
    color: salmon;
  }
}
</style>

總結：使用 component 標簽切換組件時，沒有觸發路由的改變，而且當組件切換時，不會記錄組件中的數據變化

2.  原生實現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>