我们将焦点更改为输入路由器更改

Question

我有2个组件登录和注册每个输入字段，我已经包括自动聚焦属性。但是当我将路由从Register组件更改为Login组件时，自动聚焦不起作用。我知道这是因为页面没有重新加载。但是有什么办法可以做到吗?

这是我的登录。与Register.vue相同

<form>
<input type="text" autofocus />  
<RouterLink to="/login">Login now!</RouterLink>       
</form>  

Answer 1

你可以使用$refs来访问你的输入元素:

<form>
<input type="text" autofocus ref="myInput"/>  
<RouterLink to="/login">Login now!</RouterLink>       
</form>  

然后，观察路由变化，并可以相应地触发focus()

watch:{
$route (to, from){
if(to !== from){
this.$refs.myInput.focus()
}
}
} 

对于组合api，它应该是这样的，这取决于你如何使用路由器:

setup(){
const myInput = ref(null)
const route = useRoute()
watch(route.value, (to, from) => {
if(to !== from ){
myInput.value.focus()
}
});
}

Answer 2

当你导航到另一个页面时，vue-router并不会重新加载页面。您需要在JavaScript中指定转到另一个页面的位置。您可以通过在设置脚本中创建一个函数来导航到新位置来实现这一点。在下面的例子中，我使用web哈希进行导航，所以你可能需要在你的代码中实现不同的功能。

<script setup>
// declare the navigation function
function nav(path) {
location = path
}
</script>
<template>
<input type="text" autofocus>
<!-- Navigate to #/about on click -->
<button @click="nav('#/about')"></button>
</template>