vue-router-link選擇樣式設(shè)置

第一種

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

在css中設(shè)置 .actve樣式即可

第二種

在css中寫(xiě)樣式 router-link-exact-active

<template>
? <div id="app">
?? ? ?<div class="nav">
?? ??? ? ?<router-link to='/home'>首頁(yè)</router-link>
?? ??? ? ?<router-link to='/about'>關(guān)于我們</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的區(qū)別

1.hash

hash 雖然出現(xiàn)在 URL 中，但不會(huì)被包括在 HTTP 請(qǐng)求中，對(duì)后端完全沒(méi)有影響，因此改變 hash 不會(huì)重新加載頁(yè)面。

hash 模式下，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如 http://www.npc.com，因此對(duì)于后端來(lái)說(shuō)，即使沒(méi)有做到對(duì)路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤。

hash 設(shè)置的新值必須與原來(lái)不一樣才會(huì)觸發(fā)動(dòng)作將記錄添加到棧中。

hash 只可修改 # 后面的部分，因此只能設(shè)置與當(dāng)前 URL 同文檔的 URL。

hash 只可添加短字符串。

2.history（服務(wù)器環(huán)境下才有效果）

pushState() 設(shè)置的新 URL 可以是與當(dāng)前 URL 同源的任意 URL；；

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

pushState() 通過(guò) stateObject 參數(shù)可以添加任意類(lèi)型的數(shù)據(jù)到記錄中；；

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

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

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

vue-router的link樣式設(shè)置

發(fā)現(xiàn)router-link添加上去后文字上會(huì)出現(xiàn)下劃線，打開(kāi)調(diào)試工具發(fā)現(xiàn)router-link其實(shí)是由a來(lái)實(shí)現(xiàn)的，在reset的時(shí)候

a {
? ? text-decoraction: none;
}

至于點(diǎn)擊之后的樣式則是router-link-active

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。