首页 > 其他分享 >第三十四章 Vue路由进阶之声明式导航(导航高亮)

第三十四章 Vue路由进阶之声明式导航(导航高亮)

时间:2024-11-08 11:45:22浏览次数:7  
标签:Vue 高亮 进阶 color link router 导航 类名

目录

一、导航高亮

1.1. 基于语法

1.2. 主要代码 

二、声明式导航的两个类名

2.1. 声明式导航类名匹配方式

2.2. 声明式导航类名样式自定义 

​2.3. 核心代码


一、导航高亮

1.1. 基于语法

在Vue中通过VueRouter插件,我们可以非常简单的实现实现导航高亮效果

VueRouter 提供了一个全局组件 router-link (取代 a 标签)

① 能跳转,配置 to 属性指定路径(必须) 。

,但是to标签中填写的路径无需 #

a标签的写法:

router-link写法:

② 能高亮,默认就会提供高亮类名,可以直接设置高亮样式

我们通过开发者工具可以看到,router-link的本质还是 a 标签

1.2. 主要代码 

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

二、声明式导航的两个类名

2.1. 声明式导航类名匹配方式

我们发现 router-link 自动给当前导航添加了 两个高亮类名

① router-link-active 模糊匹配 (用的多)

to="/my" 可以匹配 /my /my/a /my/b ....

② router-link-exact-active 精确匹配

to="/my" 仅可以匹配 /my

2.2. 声明式导航类名样式自定义 

我们已经看到router-link默认给我们添加了两个高亮类名,所以我们可以通过修改这两个类名的样式属性,来自定义修改高亮的颜色及其他样式效果:

 2.3. 核心代码

其余代码不变,照搬前面的即可

App.vue

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a.router-link-active {
  background-color: purple;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

标签:Vue,高亮,进阶,color,link,router,导航,类名
From: https://blog.csdn.net/qushaming/article/details/143466089

相关文章

  • Vue3+AntDesign后台管理系统 | 小蚂蚁云
      项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、AntDesign、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈......
  • 最全Vue3开源管理系统 | 小蚂蚁云
    框架ElementPlusAntDesignVueNaiveUIArcoDesign简介element-uiVue3版本AntDesign的Vue实现,组件的风格与AntDesign保持同步Vue作者推荐的Vue3ui组件库ArcoDesign主要服务于字节跳动旗下中后台产品的体验设计和技术实现社区活跃度高高中中实现方式单文件Vue单文......
  • Vue3+ElementPlus快速入门 | 小蚂蚁云
       项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技......
  • Vue项目引入CDN加速
    Vue项目引入CDN加速前言阿里云服务器,如果使用的是1M带宽,在加载样式时,例如ElementUI,Ckeditor的时候,非常的慢,所以考虑是用CDN来加速。引入Vue和Element首先我们需要引入的是Element的CDN加速:传送门目前可以通过unpkg.com/element-ui获取到最新版本的资源,在页面上引入......
  • jeecg使用vue-pdf 和print-js实现pdf预览和打印
    前言近期我正在开发一个前后端分离项目,使用了SpringBoot和Vue2,借助了国内优秀的框架jeecg,前端UI库则选择了ant-design-vue。在项目中,需要实现文件上传功能,同时还要能够在线预览和下载图片和PDF文件,甚至需要在页面上直接打印PDF文件。尽管框架自带了vue-print-nb-jeecg组件......
  • 36套Web前端全栈Vue3项目实战P7架构-入门篇+项目篇+进阶篇+架构篇
    36套Web前端全栈Vue3项目实战P7架构-入门篇+项目篇+进阶篇+架构篇36套eb前端全栈Vue3项目实战-入门篇+项目篇+进阶篇+架构篇,P7前端架构,高薪面试,Vue3源码剖析视频课程-技术栈-TypeScript+Vute+ElementPlus+Koa2+Node.js+Pinia+EChart4.0+Uni-App+React18+Flutter+Web3D+Vant+UI,项......
  • PHP与Vue.js结合,开发现代Web应用的前后端分离
    随着前端技术的迅猛发展,前后端分离已成为现代Web应用开发的重要趋势。在这个架构中,PHP作为后端语言,配合Vue.js这样的前端框架,可以有效提高开发效率和用户体验。PHP与Vue.js的结合,使得开发者能够专注于各自领域的专业技术,形成高效、灵活的开发模式。PHP作为一种成熟的后端开发语言......
  • vue前端sku实现
    this.value.skuStockList=[];letskuList=this.value.skuStockList;//只有一个属性时if(this.selectProductAttr.length===1){letattr=this.selectProductAttr[0];for(leti=0;i<attr.values.length;i++)......
  • 基于springboot+vue.js+uniapp小程序的计算机学习系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于springboot+vue.js+uniapp小程序的it职业生涯规划系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......