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

文章目录

• 一、引入
• 二、解决方案
• 三、代码示例
• 四、声明式导航-两个类名
• • 1）router-link-active
  • 2）router-link-exact-active

一、引入

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

需求 实现导航高亮效果

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

二、解决方案

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

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

语法： 发现音乐

  
    
      发现音乐
      我的音乐
      朋友
    
    
      
      
    
  

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

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

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

三、代码示例

  
    
      发现音乐
      我的音乐
      朋友
    
    
      
      
    
  



.footer_wrap a.router-link-active {
  background-color: purple;
}

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

当我们使用 跳转时，自动给当前导航加了两个类名

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

1）router-link-active

模糊匹配（用的多）

to=“/my” 可以匹配 /my /my/a /my/b …

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

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

2）router-link-exact-active

精确匹配（exact）

to=“/my” 仅可以匹配 /my

代码示例

/* 
  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;
}