vue3实现回车导航
实现回车导航的方法
在Vue3中，可以通过监听键盘事件来实现回车导航功能。以下是一种常见的实现方式：
监听键盘事件
在模板中为需要监听回车事件的元素添加@keyup事件监听：
<template>
<input
v-model="inputValue"
@keyup.enter="handleEnter"
placeholder="按回车键导航"
/>
</template>定义处理方法
在setup函数中定义处理回车事件的方法：
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const inputValue = ref('')
const handleEnter = () => {
if (inputValue.value.trim()) {
router.push({ path: `/search/${inputValue.value}` })
}
}
</script>全局监听回车事件
如果需要在整个应用中监听回车键，可以在根组件中添加全局事件监听：
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
window.addEventListener('keyup', handleGlobalEnter)
})
onUnmounted(() => {
window.removeEventListener('keyup', handleGlobalEnter)
})
const handleGlobalEnter = (e) => {
if (e.key === 'Enter' && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
router.push('/default-route')
}
}使用自定义指令
可以创建一个自定义指令来简化回车事件的处理：
// 注册全局指令
app.directive('enter', {
mounted(el, binding) {
el.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
binding.value()
}
})
}
})
// 使用指令
<input v-enter="handleEnter" />注意事项
- 确保在使用路由前正确导入
useRouter - 考虑添加防抖处理避免快速连续回车导致多次导航
- 在组件卸载时移除事件监听防止内存泄漏
- 对于表单场景，可能需要阻止默认的回车提交行为
