vue路由跳轉 頁面回到頂部

1.導航守衛

 

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

 或

this.$router.beforeEach((to, from, next) => {

        //to   即將要進入的目標

        //from 當前導航正要離開的路由 

        //next  必須調用next才可以進行頁面跳轉

})

 

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

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

 

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