(原創) Vue Router 中 3 種 route 的方式

1. router api

<button class="link card-footer-item" @click="showDetail({name: 'hero-detail', params:{id: hero.id} })"><span>Select</span></button>

showDetail(heroDetail){
        console.log("I am in showDetail!");
        this.$router.push(heroDetail);
      },

2. router-link component

<router-link :to="{name: 'hero-detail', params:{id: hero.id} }" tag="button"
                    class="link card-footer-item">
                    <i class="fas fa-check"></i>
                    <span>Select</span>
                  </router-link>

3. Nav bar