Vuetify 按钮配对路由链接，打造优雅导航栏，提升用户体验

2024-04-01 22:32:34

Vuetify 按钮搭配路由链接打造优雅导航栏

简介

在构建网站时，为导航栏按钮添加活动样式可以增强用户体验。本文将指导你使用 Vuetify 按钮和路由链接实现这一功能，打造一个响应式且直观的导航系统。

实现步骤

1. 导入模块

import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import Vuetify from 'vuetify'

2. 注册路由

定义并注册你的路由。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 其他路由
]

const router = new VueRouter({ routes })

3. 创建 Vuetify 按钮

使用 v-btn 组件创建按钮，并设置 active-class 属性。

<v-btn :class="['active', { active: isActive }]" router-link-exact-active-class="active" to="/">

4. 添加路由链接

使用 router-link 指令将按钮链接到路由路径。

<router-link to="/">Home</router-link>

5. 自定义 CSS

为按钮的活动状态定义自定义样式。

.active {
  color: #333333;
  background-color: #888888;
}

代码示例

<template>
  <div>
    <v-btn :class="['active', { active: isActive }]" router-link-exact-active-class="active" to="/">
      <router-link to="/">Home</router-link>
    </v-btn>
    <v-btn :class="['active', { active: isActive }]" router-link-exact-active-class="active" to="/about">
      <router-link to="/about">About</router-link>
    </v-btn>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const isActive = computed(() => router.currentRoute.path === '/')
    return {
      isActive
    }
  }
}
</script>