在做项目的过程中,遇到页面切换后不会滚动到顶部
解决方案:
在页面使用的layout中或者页面中,使用监听
watch: {
'$route': function(to,from){
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
this.$refs.scroll.scrollTop = 0 // 因为我的的滚动层不是body,所以将滚动层的scrollTop 至为0
}
},
还有在官方文档中看到的其他解决方案,大家可以试下
- 在
nuxt.config.js:
中配置
module.exports = {
router: {
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
}
}
- 默认情况下,从当前页面切换至目标页面时,Nuxt.js 会让目标页面滚动至顶部。但是在嵌套子路由的场景下,Nuxt.js 会保持当前页面的滚动位置,除非在子路由的页面组件中将 scrollToTop 设置为 true。
<template>
<h1>子页面组件</h1>
</template>
<script>
export default {
scrollToTop: true
}
</script>
- 我们可以在
nuxt.config.js:
配置所有页面渲染后滚动至顶部:
module.exports = {
router: {
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
}
}
- 使用路由守卫,在nuxt中配置路由守卫可以在
plugins
文件下新建router.js
在里面写入
export default ({ app }) => {
app.router.afterEach((to, from, next) => {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
// 或者滚动容器的scrollTop = 0
});
/*----------------------------下面是给页面加入百度统计代码的方法,有需要的可以参考下-----------------------------------------*/
app.router.beforeEach((to, from, next) => {
next();
if (process.client) {
let _hmt = _hmt || [];
// 百度统计代码
(function() {
let hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0cb92588b9c690b3c48173df77fa700d";
let s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
}
})
}
然后在nuxt.config.js中配置
module.exports = {
plugins: [
{src: '@/plugins/router', ssr: false}
],
}
然后 重启项目
具体的可以看官方文档https://zh.nuxtjs.org/api/configuration-router https://zh.nuxtjs.org/api/pages-scrolltotop