vue2路由之指定滑動位置scrollBehavior


看源碼的時候看到這個屬性:

 

 

新手自然不知道這個是什么東西了,查了下vue  API:

https://router.vuejs.org/en/advanced/scroll-behavior.html

上面這個的意思就是當轉到一個新的頁面時,定位到最頂端。

Scroll Behavior

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.

Note: this feature only works in HTML5 history mode.

When creating the router instance, you can provide the scrollBehavior function:

const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return desired position } })

The scrollBehavior function receives the to and from route objects. The third argument, savedPosition, is only available if this is a popstate navigation (triggered by the browser's back/forward buttons).

The function can return a scroll position object. The object could be in the form of:

  • { x: number, y: number }
  • { selector: string }

If a falsy value or an empty object is returned, no scrolling will happen.

For example:

scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } 

This will simply make the page scroll to top for all route navigations.

Returning the savedPosition will result in a native-like behavior when navigating with back/forward buttons:

scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } 

If you want to simulate the "scroll to anchor" behavior:

scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } } 

We can also use route meta fields to implement fine-grained scroll behavior control. Check out a full example here.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM