kuc*_*ram 25 vue.js vue-router
我可以像这样设置滚动行为到Vue.js路由器:
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'index',
component: Main
},
{
path: '/some-path',
name: 'some-path',
component: SomePath
}
],
scrollBehavior() {
return {x: 0, y: 0}
}
})
当您单击某个不是最新的页面的链接时,这非常有效.当我点击已经渲染的链接时,即在页脚中,没有任何反应.Vue Router假设没有状态转换.在这种情况下向上滚动的首选方法是什么？
Vit*_*nov 45
你不能通过vue-router这样做.但是您可以向每个路由器链接添加滚动到顶部方法.
只需创建一个方法
methods: {
scrollToTop() {
window.scrollTo(0,0);
}
}
并将其添加到链接
<router-link @click.native="$scrollToTop">
如果你想在页脚之外使用它,最好将它添加到Vue原型中
Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)
这不是100%的解决方案,但它是最简单的解决方案
PJ.*_*son 12
behavior: smooth如果您愿意，您也可以使用。
moveTo () {
let to = this.moveToDown
? this.$refs.description.offsetTop - 60
: 0
window.scroll({
top: to,
left: 0,
behavior: 'smooth'
})
this.moveToDown = !this.moveToDown
}
我想回答这个问题，以向滚动问题根本无效的其他人添加更多内容。
我无法使上述任何解决方案正常工作，这实在令人沮丧。
最终为我工作的是以下内容：
const router = new Router({
mode: 'history',
routes: [...],
scrollBehavior() {
document.getElementById('app').scrollIntoView();
}
})
我将VueJs应用安装到#app，因此可以确定它存在并且可供选择。
我为此找到的最佳解决方案是：https : //router.vuejs.org/guide/advanced/scroll-behavior.html
具体来说：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
扩展 Vitaly Migunov 的答案，您可以直接从路由器scrollTo向窗口对象添加方法。这样您就不需要向每个路由器链路添加该功能。
const router = new Router({
mode: 'history',
routes: [...],
scrollBehavior() {
window.scrollTo(0,0);
}
})
用于refs滚动到特定部分
<template>
<body>
<div ref="section">
// Your content section
</div>
</body>
</template>
export default class MyPage extends Vue {
$refs!: {
section: HTMLFormElement;
};
scrollToTop() {
this.$refs.section.scrollTo(0, 0);
}
}
| 归档时间： |
|
| 查看次数： |
28936 次 |
| 最近记录： |