當使用Vue構建單頁應用時，一個常見的需求就是希望用戶能夠快速返回頁面的頂部。Vue路由提供了一個簡單的辦法來實現這個功能，以下是一個展示如何滾動到頁面頂部的例子。

export default {
mounted() {
window.scrollTo(0, 0);
}
}

上述代碼使用了window.scrollTo()方法來滾動到頁面的頂部。該方法的前兩個參數分別表示新的文檔的左上角相對于當前窗口左上角的位置。

但是該方法的一個問題是不支持平滑滾動。用戶在使用時可能會感到突兀，因此我們可以使用CSS3的transition來實現平滑滾動。

export default {
mounted() {
setTimeout(() =>{
let top = document.getElementById('app').offsetTop
window.scrollTo({
top,
behavior: "smooth"
})
}, 0)
}
}

在上方代碼中，我們首先使用了setTimeout來確保頁面能夠完全加載。然后獲取了vue根節點#app元素在文檔流中的位置。最后使用scrollTo()的新實現方式來平滑滾動到頁面的頂部。

當然，如果我們使用Vue-Router的話，我們可以通過傳遞一個路由鉤子函數來實現滾動到頁面頂部。下面是一個使用Vue-Router的例子：

const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
title: 'Home',
scrollToTop: true
}
}
]
})
router.beforeEach((to, from, next) =>{
document.title = to.meta.title
if (to.matched.some(route =>route.meta.scrollToTop)) {
setTimeout(() =>{
window.scrollTo({
top: 0,
behavior: "smooth"
})
}, 0)
}
next()
})

在上述代碼中，我們在Vue-Router定義的meta對象中增加了一個scrollToTop屬性。當路由到這個頁面時，路由鉤子函數會檢測是否需要滾動到頁面的頂部。如果是的話，就使用scrollTo()方法來實現滾動到頁面的頂部。