路由样式

@Style

区分当前路由样式 active 和严格匹配当前路由样式 exactActive

嵌套路由下，路由链上的会匹配应用当前路由样式 active - 无论嵌套路径多么深，只要链接的目标路径是当前路径的一部分，就会添加

而末端子路由应用严格匹配当前路由样式 exactActive - 仅当 to 属性精确匹配当前激活的路由时才会应用

单级路由下，当前路由会同时叠加两种样式类

定制的样式类应写在全局 CSS 中

Default

默认会添加两个路由样式类：router-link-active和router-link-exact-active 以高亮当前路由

修改其样式来定制 UI

更多详情，请查看匹配当前路由的链接 active-links

.router-link-active {
  color: #f40;
}
    
.router-link-exact-active {
  border-bottom: 1px solid #f40;
}

activeClass、exactActiveClass

<router-link> 标签属性 RouterLinkProps

需要为每个 <router-link> 都指定该属性

指定后，会覆盖默认的两个路由样式类

支持小驼峰和连字符两种格式

使用不同的样式类；样式内容可以一致

<router-link activeClass="btm" exactActiveClass="color" to="/home">home</router-link>
<router-link active-class="btm" exact-active-class="color" to="/mine">mine</router-link>

linkActiveClass、linkExactActiveClass

路由配置时指定，会覆盖默认的两个路由样式类

两个样式类默认为空，通过定制实现个性化开发

使用不同的样式类；样式内容可以一致

路由 Router → options → RouterOptions

const router = createRouter({
  // ...
  linkActiveClass : "nav-color";
  linkExactActiveClass : "exact-nav-color";
})

或使用 options 属性更加明确的指定

router.options = {
  linkActiveClass: "nav-color",
  linkExactActiveClass: "exact-nav-color",
};

或

router.options.linkActiveClass = "nav-color"

router.options.linkExactActiveClass = "exact-nav-color"

匹配路由

以上是全局路由样式，对所有路由生效

自定义路由样式 - 适合某个特定路由

根据当前路由和页面是否匹配来设置动态样式

<div :class = "{'active':route.path.includes('/home')}">Home</div>

以上是针对使用了 <router-link> 的声明式导航

如果是编程式导航，按照元素的普通样式和激活样式区分设计即可

Summary & Homework

Summary

全局设置路由样式

. 指定样式 - .router-link-active .router-link-exact-active

. 指定类 - activeClass、exactActiveClass

. 配置路由样式类 - linkActiveClass、linkExactActiveClass

单独设置路由样式

注意：应使用不同的样式类；样式内容可以一致

Homework

[] 主路由/导航 AppNav.vue

使用声明式导航 <router-link> 实现

分别使用上述方法实现主导航

当前活动路由

[] 菜单标签页 Menu → 标签页组件 Tabbar.vue

使用编程式导航实现

以子路由的形式呈现

{
  path: "/menu",
  name: "menu",
  component: () => import("@/views/MenuView.vue"),
  meta: { showNav: true, title: "菜单" },
  children: [
    {
      path: "",
      name: "goods",
      component: () => import("@/components/Goods.vue"),
      meta: { showNav: true, title: "菜单-商品列表" },
    },
    {
      path: "vip",
      name: "vip",
      component: () => import("@/components/Vip.vue"),
      meta: { showNav: true, title: "菜单-商品列表" },
    },
    {
      path: "rank",
      name: "rank",
      component: () => import("@/components/Rank.vue"),
      meta: { showNav: true, title: "菜单-年度封神榜" },
    },
    {
      path: "favorite",
      name: "favorite",
      component: () => import("@/components/Favorite.vue"),
      meta: { showNav: true, title: "菜单-我的常点" },
    },
  ],
}

封装为组件，定义 Props 属性

const tabs = [
  { ind: 0, title: '经典菜单', path: '/menu', keyword: 'classic' },
  { ind: 1, title: '会员卡', path: '/menu/vip', keyword: 'member' },
  { ind: 2, title: '年度封神榜', path: '/menu/rank', keyword: 'rank' },
  { ind: 3, title: '我的常点', path: '/menu/favorite', keyword: 'favor' },
]

<button v-for="(item, ind) in tabs" :key="ind" class="tab-item" @click.stop="navToItem(item)"
:class="{ active: currentInd === ind }">
  <h3>{{ item.title }}</h3>
</button>

.tab-item {
  position: relative;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 4px;
  background-color: var(--main-color);
}

当前活动路由