Vuejs，我需要重点关注路线变化

Question

在SPA中，特别是Vuejs，我需要在访问新路径时重置页面的选项卡索引

我试过了：

watch: {
    $route (to, from) {
        document.getElementById('content').focus()
        // or
        // document.body.focus()
        // or
        // window.focus()
    }
}

我尝试将相同的代码放在：

beforeRouteEnter (to, from, next) {
    next(vm => vm.resetFocus())
},
methods: {
    resetFocus() {
        document.getElementById('content').focus()
        // or
        // document.body.focus()
        // or
        // window.focus()
    }
}

我可以专注于ref =＆＃34;焦点＆＃34;在我的主模板中，但这会显示元素，这不是一个理想的场景。我需要窗口或正文在页面加载时进行聚焦。

组件模板：

<template>
    <div id="app">
    <a class="sr-only sr-only-focusable skip-link" ref="focus" href="#content">Go to main content</a>
    <navigation><navigation/>
    <main id="content">
        <router-view></router-view>
    </main> 
    </div>
</template>

在我的组件代码中：

    methods: {
        setFocus(){
            this.$refs.focus.focus()
        }
    },
    watch:{
        $route (to, from){
            this.setFocus()
        }
    },

两次尝试都没有给我任何结果..