vue點擊當(dāng)前路由高亮小案例
更新時間:2019年09月26日 10:44:57 作者:小羽向前跑
這篇文章主要為大家詳細(xì)介紹了vue點擊當(dāng)前路由高亮小案例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue點擊當(dāng)前路由高亮的具體代碼,供大家參考,具體內(nèi)容如下
功能展示:
組件代碼:
標(biāo)簽上加exact
.router-link-active{ background: rgba(255,255,255,0.8); color: gray; }
<template> <nav> <ul> <li> <router-link to="/" exact>博客</router-link> <router-link to="/AddBlog" exact>寫博客</router-link> </li> </ul> </nav> </template> <script> export default { name: "bolgheader" } </script> <style scoped> ul{ list-style-type: none; text-align: center; margin:0; } li{ display: inline-block; margin:0 10px; } a{ color:rgb(102, 119, 204); text-decoration: none; padding:12px; border-radius: 5px; font-size:20px; } nav{ background: #eee; padding: 30px 0; margin-bottom: 40px; } .router-link-active{ background: rgba(255,255,255,0.8); color: gray; } </style>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應(yīng)最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計算時間,本文將給大家詳細(xì)的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下2023-09-09vue中使用better-scroll實現(xiàn)滑動效果及注意事項
這篇文章主要介紹了vue中使用better-scroll實現(xiàn)滑動效果,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面
這篇文章主要介紹了vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06Vue3中使用vuedraggable拖拽實戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實戰(zhàn)教程,文中通過示例介紹了vue3拖拽組件vuedraggable的使用demo,需要的朋友可以參考下2023-06-06在Vue.js應(yīng)用中實現(xiàn)分布式搜索和全文搜索
分布式搜索和全文搜索在現(xiàn)代應(yīng)用程序中變得越來越重要,因為它們可以幫助用戶快速查找和檢索大量數(shù)據(jù),Elasticsearch是一種強大的分布式搜索引擎,本文將介紹如何在Vue.js應(yīng)用程序中實現(xiàn)分布式搜索和全文搜索,以及如何與Elasticsearch集成,需要的朋友可以參考下2023-11-11