高级自定义：通过 v-slot 使用插槽 API
如果你需要更复杂的自定义逻辑或更加灵活的渲染，可以结合 v-slot 来实现：
<template><router-link :to="to" custom v-slot="{ navigate }"><div @click="navigate" class="custom-link"><slot></slot> <!-- 插槽内容 --></div></router-link>
</template><script>
export default {name: 'CustomRouterLink',props: {to: {type: [String, Object],required: true,},},
};
</script><style scoped>
.custom-link {cursor: pointer;color: blue;text-decoration: none;
}
.custom-link:hover {text-decoration: underline;
}
</style>代码解释：
custom 和 v-slot：
custom 属性告诉 router-link 使用自定义插槽而不是默认的 标签。
v-slot=“{ navigate }” 提供了一个 navigate 函数，你可以通过它来控制点击时的路由导航。
使用一个
插槽内容：
使用插槽来渲染传入的内容，这样父组件可以灵活地控制插槽内的内容。
总结：
自定义 RouterLink 组件非常有用，可以根据需要完全控制路由链接的外观和行为。你可以通过：
使用 router-link 的 custom 属性与 v-slot 实现高度自定义。
通过插槽提供灵活的内容渲染方式。
控制点击事件，执行额外的自定义逻辑。
这种方式使得你能够在 Vue Router 中处理更复杂的路由导航场景，比如自定义按钮、动画、图标等元素。
完整示例：
<!-- CustomRouterLink.vue -->
<template><router-link :to="to" custom v-slot="{ navigate, isActive, isExactActive }"><!-- 自定义按钮 --><button :class="['custom-link', { active: isActive, exact: isExactActive }]"@click="navigate"><slot></slot> <!-- 插槽内容，允许用户传入自定义的按钮文字或图标 --></button></router-link>
</template><script>
export default {name: 'CustomRouterLink',props: {to: {type: [String, Object],required: true,},},
};
</script><style scoped>
.custom-link {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;text-transform: uppercase;font-size: 14px;transition: background-color 0.3s;
}.custom-link:hover {background-color: #0056b3;
}.custom-link.active {background-color: #28a745;
}.custom-link.exact {font-weight: bold;
}
</style>custom 属性：启用了 router-link 的自定义插槽，允许我们替换默认的 <a> 标签，提供完全自定义的渲染内容。
v-slot=“{ navigate, isActive, isExactActive }”：解构出了插槽的属性，navigate 用来触发路由跳转，isActive 和 isExactActive 分别表示该链接是否为活动状态或精确匹配状态。
插槽：<slot></slot> 允许父组件传入内容，这样我们可以动态渲染按钮的文本或图标。
@click="navigate"：点击按钮时，调用 navigate 方法进行路由跳转。
样式：为自定义按钮添加了基本的样式，并根据是否激活（isActive）或精确匹配（isExactActive）来动态更改按钮的颜色和样式。
使用 CustomRouterLink 组件
<!-- ParentComponent.vue -->
<template><div><!-- 使用自定义 RouterLink 组件 --><CustomRouterLink to="/home">Go to Home</CustomRouterLink><CustomRouterLink to="/about">Go to About</CustomRouterLink><CustomRouterLink to="/contact">Contact Us</CustomRouterLink></div>
</template><script>
import CustomRouterLink from './CustomRouterLink.vue';export default {components: {CustomRouterLink,},
};
</script>插槽：我们通过插槽传入了按钮的文本内容，例如 “Go to Home”、“Go to About” 等，允许每个链接自定义显示的文本。
按钮的样式会根据当前路由的状态动态变化。如果当前路由是该按钮的目标路径，它会显示为 active 状态，且如果路径完全匹配，还会显示为 exact 状态。
这个示例展示了如何使用 Vue Router 的 router-link 的 custom 属性和 v-slot 来实现高度自定义的路由导航组件。通过 v-slot，我们可以访问到 navigate 函数来控制导航，并可以根据路由的活动状态来动态改变按钮的样式。这种方法非常灵活，允许你根据需求创建任何形式的自定义链接组件。