【Vue】声明式导航-导航链接

文章目录

一、引入

但凡说到声明式导航,都需要想到router-link

需求 实现导航高亮效果

如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!!!


二、解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)(即导航式链接)

  • 能跳转 ,配置 to 属性指定路径(必须 ) 。本质还是 a 标签 ,to 无需 #
  • 能高亮 ,默认就会提供高亮类名,可以直接设置高亮样式

语法: <router-link to="path的值"> 发现音乐 </router-link>

vue 复制代码
  <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>

通过router-link自带的两个样式进行高亮

使用router-link跳转后,我们发现。当前点击的链接默认加了两个class的值 router-link-exact-activerouter-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能


三、代码示例

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>

<style>
.footer_wrap a.router-link-active {
  background-color: purple;
}
</style>

四、声明式导航-两个类名

当我们使用 <router-link></router-link> 跳转时,自动给当前导航加了两个类名

单词长是为了防止和我们平时定义的类名重名


模糊匹配(用的多)

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

只要是以/my开头的路径 都可以和 to="/my"匹配到

eg:不仅要匹配/discover还要匹配/discover/toplist


精确匹配(exact)

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

代码示例

css 复制代码
/* 
  router-link-active 模糊匹配(更多)
  to="/find"  =>  地址栏 /find   /find/one   /find/two  ...

  router-link-exact-active 精确匹配
  to="/find"  =>  地址栏 /find  
*/
.footer_wrap a.router-link-active {
  background-color: purple;
}
相关推荐
学不会•9 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS1 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。6 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客6 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js