【VUE】- 路由切換時，始終回到頁面最頂部

今天的總結是解決兩個小問題的過程，項目初步完成後，組內測試時發現了兩個常見卻又易被忽視的問題，一是標題不固定，隨鼠標移動做移動，二是頁面滾動行爲問題，具體如下面動圖描述；

修改前：

一、標題欄固定

一個個解決首先來看一下這個標題欄移動的問題，解決方案如下-設置標題欄定位Position：

• absolute：生成絕對定位的元素，元素的位置通過"“1eft"，“top”，"right"以及"bottom”屬性進行規定；
• fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位
• relative：生成相對定位的元素，相對於其正常位置進行定位
• static：默認值，沒有定位

// 導航欄
<van-nav-bar
     class="brainstorm"
     title="頭腦風暴"
>
</van-nav-bar>

/* 導航欄背景顏色及定位 */
.brainstorm{
      position: fixed;
      width:100%;
}

二、路由切換時，始終回到頁面最頂部

1. 導航守衛

const router = new Router({ routes })
router.beforeEach((to, from, next) => {
     // 讓頁面回到頂部
     document.documentElement.scrollTop = 0
     // 調用 next()，一定要調用 next 方法，否則鉤子就不會被銷燬
    next()
 })

• to:Route: 即將要進入的目標路由對象
• from: Route: 當前導航正要離開的路由
• next: Function: 調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數,所以一定要調用next方法

2. Vur Router提供的scrollBehavior 方法-簡單的讓頁面滾動到頂部

// 每次做路由切換時，始終回到最頂部
scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
 }
  

• to:Route: 即將要進入的目標路由對象
• from: Route: 當前導航正要離開的路由
• savedPosition: Function: 接收to和from
  路由對象，格式爲：{ x: number, y: number }

項目中使用了路由守衛，所以這裏是採用了第一種方式來解決目前的問題，我們也可以根據自己的業務需求進行設置頁面滾動位置，更詳細滾動行爲可參考官網：滾動行爲

完成以上操作項目中的兩個小問題也就解決了，下面是解決之後的樣式：