要使v-btn在点击时不发起路由,但仍然根据路由显示活动状态,可以通过以下步骤实现:
<template>
<v-btn @click="handleClick">按钮</v-btn>
</template>
<script>
export default {
methods: {
handleClick(event) {
event.preventDefault(); // 阻止默认的路由跳转行为
// 处理其他逻辑
}
}
}
</script>
<template>
<router-link to="/path" exact active-class="active">
<v-btn>按钮</v-btn>
</router-link>
</template>
在上述代码中,通过将v-btn包裹在<router-link>组件中,并设置to属性为目标路由路径,可以实现根据路由显示活动状态的效果。active-class属性用于指定活动状态的CSS类名。
这样,当点击v-btn时,不会触发路由跳转,但仍然可以根据路由显示活动状态。
请注意,以上代码示例中的v-btn和<router-link>组件是基于Vue.js和Vue Router的,如果你使用的是其他前端框架或库,可以根据相应的文档和API进行相应的调整。
领取专属 10元无门槛券
手把手带您无忧上云