vue-router-link選擇樣式設(shè)置方式
vue-router-link選擇樣式設(shè)置
第一種
在router-link組件上 添加屬性 active-class=‘ative’
在css中設(shè)置 .actve樣式即可
第二種
在css中寫樣式 router-link-exact-active
<template>
? <div id="app">
?? ? ?<div class="nav">
?? ??? ? ?<router-link to='/home'>首頁</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 請求中，對后端完全沒有影響，因此改變 hash 不會(huì)重新加載頁面。
hash 模式下，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請求中，如 http://www.npc.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤。
hash 設(shè)置的新值必須與原來不一樣才會(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() 通過 stateObject 參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中；；
pushState() 可額外設(shè)置 title 屬性供后續(xù)使用。
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）。
history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少對 /book/id 的路由處理，將返回 404 錯(cuò)誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺(tái)配置支持……所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁面，這個(gè)頁面就是你 app 依賴的頁面。”
vue-router的link樣式設(shè)置
發(fā)現(xiàn)router-link添加上去后文字上會(huì)出現(xiàn)下劃線，打開調(diào)試工具發(fā)現(xiàn)router-link其實(shí)是由a來實(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案
這篇文章主要介紹了Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vuex的actions屬性的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作,結(jié)合實(shí)例形式詳細(xì)分析了vue封裝全局filter及相關(guān)使用技巧,需要的朋友可以參考下2020-02-02
vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖
因?yàn)楣ぷ髦幸玫礁侍貓D,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關(guān)于vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖的相關(guān)資料,需要的朋友可以參考下2022-11-11
關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問題解決
使用ElementUI的el-table后,偶然發(fā)現(xiàn)出現(xiàn)行列錯(cuò)位、對不齊問題,下面這篇文章主要給大家介紹了關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問題解決的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue.js 實(shí)現(xiàn)a標(biāo)簽href里添加參數(shù)
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)a標(biāo)簽href里添加參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問題
我們在做form表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中，如何實(shí)現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
這篇文章主要給大家介紹了關(guān)于Vite使用報(bào)錯(cuò)解決方法的相關(guān)資料,這篇文中通過圖文以及代碼將遇到的一些報(bào)錯(cuò)介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vite具有一定的借鑒價(jià)值,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了Vue.js -- 過濾器使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
vue中使用js-xlsx導(dǎo)出excel的實(shí)現(xiàn)方法
本文主要介紹了vue中使用js-xlsx導(dǎo)出excel的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02