MarginLon MarginLon
首页
  • Web

    • Web基础
    • Web布局
    • CodeSnippet
  • Vue

    • Vue
  • React

    • React
  • Node.js

    • Node.js
  • 技术文档
  • UI组件库
  • 动画库
  • 图形库
  • 桌面端
  • 学习笔记
  • 生活笔记
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

MarginLon

http://info.cern.ch
首页
  • Web

    • Web基础
    • Web布局
    • CodeSnippet
  • Vue

    • Vue
  • React

    • React
  • Node.js

    • Node.js
  • 技术文档
  • UI组件库
  • 动画库
  • 图形库
  • 桌面端
  • 学习笔记
  • 生活笔记
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Vue

  • Vue-Router

    • 仿Vue-Router效果
    • Vue-Router基本使用
    • 嵌套路由
    • 动态路由
    • 同级跳转刷新
    • 路由匹配及优先级
    • 命名路由
    • 重定向及别名
    • 编程式导航
    • 命名视图
    • 高亮活动导航
    • 导航守卫
    • 路由元数据
  • Vuex

  • 《Vue》
  • Vue-Router
MarginLon
2022-09-01

高亮活动导航

/* 不精准 */
.router-link-active {
  position: relative;
  color: hsl(280deg, 100%, 90%);
}

.router-link-active::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100%;
  background: hsl(280deg, 100%, 70%);
  left: -14px;
}
/* 精准 */
.router-link-exact-active {
  position: relative;
  color: hsl(280deg, 100%, 90%);
}

.router-link-exact-active::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100%;
  background: hsl(280deg, 100%, 70%);
  left: -14px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
编辑 (opens new window)
上次更新: 2023/04/01, 15:26:22
命名视图
导航守卫

← 命名视图 导航守卫→

最近更新
01
KnockoutJS
11-12
02
综述
10-17
03
前言
10-12
更多文章>
Theme by Vdoing | Copyright © 2019-2024 MarginLon | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式