<router-link>屬性

<router-link>這裡用到了一個to屬性，並且把它渲染成<a>標籤，他還有其他屬性：

tag

tag可以指定<router-link>之後渲染成什麼元件, 比如要渲染成button

<router-link to="/home" tag="button">首頁</router-link>

渲染成<li>標籤

<router-link to='/home' tag='li'>

replace

replace呼叫的是history.replaceState()，不會留下history記錄, 所以指定replace的情況下, 後退鍵返回不能返回到上一個頁面中。

預設是調history.pushState()

<router-link to="/home" tag="button" replace>首頁</router-link>
<router-link to="/about" tag="button" replace>關於</router-link>

active-class

當<router-link>對應的路由匹配成功時, 會自動給當前元素設定一個router-link-active的class。

設定active-class可以修改預設的名稱（沒有修改時可以在html元素中看到class很長，現在把router-link-active修改成active看看效果），在進行高亮顯示的導航選單或者底部tabbar時, 會使用到該類。

App.vue 像這樣

<template>
  <div id="app">
    <router-link to="/home" tag="button" replace active-class="active">首頁</router-link>
    <router-link to="/about" tag="button" replace active-class="active">關於</router-link>
    <router-view></router-view>
  </div>
</template>

......

<style>
  .active{
    color: #f00;
  }

</style>

 

但是通常不會修改類的屬性, 會直接使用預設的router-link-active即可.

App.vue 像這樣

<router-link to="/home" tag="button" replace>首頁</router-link>
<router-link to="/about" tag="button" replace>關於</router-link>

......

<style>  
  .router-link-active{
    color: #f00;
  }
</style>

linkActiveClass

不動App.vue，在index.js建立路由的時候新增linkActiveClass屬性，也可以實現active-class相同的效果。

const router = new VueRouter({
  // 配置路由和元件之間的應用關係
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

類似於active-class, 只是在精準匹配下才會出現的class