vue3实现回车导航
在 Vue 3 中实现回车导航
通过监听键盘事件，可以在输入框按下回车键时触发导航跳转。以下是具体实现方法：
方法一：使用 @keyup.enter 指令
<template>
<input v-model="searchQuery" @keyup.enter="navigateToSearch" />
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const searchQuery = ref('');
const navigateToSearch = () => {
if (searchQuery.value.trim()) {
router.push({ path: '/search', query: { q: searchQuery.value } });
}
};
</script>方法二：手动监听事件
如果需要在非输入框元素上监听回车事件，可以通过 addEventListener 实现：
<template>
<div ref="container">按回车键导航</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const container = ref(null);
const handleKeyPress = (e) => {
if (e.key === 'Enter') {
router.push('/target-page');
}
};
onMounted(() => {
container.value.addEventListener('keydown', handleKeyPress);
container.value.setAttribute('tabindex', '0'); // 使div可聚焦
});
onUnmounted(() => {
container.value.removeEventListener('keydown', handleKeyPress);
});
</script>注意事项
- 确保目标元素可聚焦（如添加
tabindex） - 移动端可能需要额外处理虚拟键盘的回车事件
- 对于表单场景，建议结合
@submit.prevent防止默认提交行为
扩展：全局回车监听
若需在任意页面监听回车，可创建一个自定义指令：
// main.js
app.directive('enter-nav', {
mounted(el, binding) {
el._keyHandler = (e) => {
if (e.key === 'Enter') binding.value();
};
el.addEventListener('keyup', el._keyHandler);
el.setAttribute('tabindex', 0);
},
unmounted(el) {
el.removeEventListener('keyup', el._keyHandler);
}
});使用方式：
<div v-enter-nav="goToHome">按回车回首页</div>
