vue-router-link選擇樣式怎么設置

本篇內容主要講解“vue-router-link選擇樣式怎么設置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue-router-link選擇樣式怎么設置”吧!

vue-router-link選擇樣式設置

第一種

在router-link組件上 添加屬性 active-class=‘ative’

在css中設置 .actve樣式即可

第二種

在css中寫樣式 router-link-exact-active

<template>
  <div id="app">
      <div class="nav">
          <router-link to='/home'>首頁</router-link>
          <router-link to='/about'>關于我們</router-link>
      </div>
    <transition :duration="{ enter: 500, leave: 500 }"
         enter-active-class="animated fadeIn" 
         leave-active-class="animated fadeOut">
        <router-view/>
    </transition>
  </div>
</template>

<script>
import '@/util/animate.min.css'
    // import Classstyle from '@/components/Classstyle'
    export default{
        data(){
            return{
                
            }
        },
        components:{
            // Classstyle
        }
    }
</script>

<style lang="less">
*{
    margin: 0;
    padding: 0;
}
.nav{
    text-align: center;
    margin: 0 auto;
}
.nav a{
    padding: 50px;
}
.nav a.router-link-exact-active{
    background-color: orange;
    color: #fff;
}
</style>

hash和history的區別

1.hash

hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。

hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如 http://www.npc.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。

hash 設置的新值必須與原來不一樣才會觸發動作將記錄添加到棧中。

hash 只可修改 # 后面的部分，因此只能設置與當前 URL 同文檔的 URL。

hash 只可添加短字符串。

2.history（服務器環境下才有效果）

pushState() 設置的新 URL 可以是與當前 URL 同源的任意 URL；；

pushState() 設置的新 URL 可以與當前 URL 一模一樣，這樣也會把記錄添加到棧中；

pushState() 通過 stateObject 參數可以添加任意類型的數據到記錄中；；

pushState() 可額外設置 title 屬性供后續使用。

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）。

history 模式下，前端的 URL 必須和實際向后端發起請求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少對 /book/id 的路由處理，將返回 404 錯誤。Vue-Router 官網里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”

vue-router的link樣式設置

發現router-link添加上去后文字上會出現下劃線，打開調試工具發現router-link其實是由a來實現的，在reset的時候

a {
    text-decoraction: none;
}

至于點擊之后的樣式則是router-link-active

.router-link-active {
    text-decoration: none;
}

到此，相信大家對“vue-router-link選擇樣式怎么設置”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！