Vue路由器重定向到超时哈希答案

【问题标题】：Vue-router redirect to hash with timeoutVue路由器重定向到超时哈希
【发布时间】：2019-06-11 17:33:59
【问题描述】：

我有这样的路线：

{
    path: '/kontakt',
    redirect: '#contact',
    component: index
},

和滚动行为：

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
        return savedPosition
    }
    if(!to.hash) {
        return {
            x: 0, y: 0
        }
    }
    if(to.hash) {
        return {
            selector: to.hash
        }
    }
}

和 IMO，因为我在用户实际输入页面 1 秒后显示我的页面（我显示徽标 1 秒）当我输入 /kontakt 路由时，上面的代码不会将页面滚动到 #contact div。

app.vue

<div v-show="timeGap">
    <router-view />
</div>

这里 timeGap 在 setTimeout 方法中 1 秒后更改为 true。如何修复，使其在此超时后滚动到#contact div？

【问题讨论】：

你能在 codepen 或类似的地方提供一个完整的例子吗？
无法通过代码游乐场内的路由真正重现整个 SPA。
您可以在 codepen + setTimeout 上创建 Vue.js + vue-router 示例或您正在使用的示例，这样会更好地找出问题所在。

标签： vue.js hash vuejs2 vue-router

【解决方案1】：

您必须将滚动行为的控制从您的路由器 scrollBehavior 处理程序移动到您的组件 index，然后到知道徽标显示状态为 off 的地方。

这可能是：

一个 Vue lifecycle hook（mounted 或 updated）；
或此组件中知道徽标状态的其他点 (watch after computed ?);

一旦您在组件中找到该位置 (watch)，您必须检查徽标状态是否关闭并使用 this approach 进行滚动。

【讨论】：