How to use vue-router to switch pages in vue

This article mainly introduces the implementation method of the scroll bar automatically scrolling to the top when using vue-router to switch pages in the vue project. It is generally implemented using the Window scrollTo() method. This article briefly introduces the use of scrollTop. Friends in need can refer to

Sometimes we need the page scroll bar to scroll to a fixed position, generally using the Window scrollTo() method.

The syntax is: scrollTo(xpos,ypos)

xpos: required. The x-coordinate of the document to be displayed in the upper left corner of the window's document display area.

ypos: required. The y-coordinate of the document to be displayed in the upper left corner of the window's document display area.

For example, the coordinate position of the scrolling content is 100,500:

window.scrollTo(100,500);

Okay, here is just a brief introduction to this scrollTop. Next we introduce the scrolling behavior in veu-router.

Using front-end routing, when switching to a new route, you want the page to scroll to the top, or to maintain the original scroll position, just like reloading the page. vue-router can do it, but better, it allows you to customize how the page scrolls when switching routes.

Note: This feature is only available in HTML5 history mode.

When creating a Router instance, you can provide a scrollBehavior method:

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
  // return 期望滚动到哪个的位置
 }
})

The scrollBehavior method receives to and from routing objects. The third parameter savedPosition is available if and only if popstate navigation (triggered by the browser's forward/back buttons).

This method returns the object information of the scroll position, which looks like this:

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

If it returns a falsy (Translator's Note: falsy is not false, refer to here) value, or an empty object, Then no scrolling will occur.

Example:

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

For all route navigation, simply let the page scroll to the top.

Return to savedPosition. When the back/forward button is pressed, it will behave like the browser's native behavior:

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

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

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

We can also use routing metainformation to control scrolling at a more fine-grained level.

 routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]

Complete example:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '
home
' }
const Foo = { template: '
foo
' }
const Bar = {
 template: `
  

   bar
   

   
Anchor
  

 `
}
// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
 if (savedPosition) {
  // savedPosition is only available for popstate navigations.
  return savedPosition
 } else {
  const position = {}
  // new navigation.
  // scroll to anchor by returning the selector
  if (to.hash) {
   position.selector = to.hash
  }
  // check if any matched route config has meta that requires scrolling to top
  if (to.matched.some(m => m.meta.scrollToTop)) {
   // cords will be used if no selector is provided,
   // or if the selector didn't match any element.
   position.x = 0
   position.y = 0
  }
  // if the returned position is falsy or an empty object,
  // will retain current scroll position.
  return position
 }
}
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 scrollBehavior,
 routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]
})

new Vue({
 router,
 template: `
  

   
Scroll Behavior
   

    
/
    
/foo
    
/bar
    
/bar#anchor
   
   
  

 `
}).$mount('#app')

I checked it on the Internet, and netizens said that you can also try writing this in the main.js entry file with vue-router

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
});

I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed introduction to routing and middleware in node.js

How to implement basic shopping using Angular Car function

Detailed introduction to controlled components and uncontrolled components in React

The above is the detailed content of How to use vue-router to switch pages in vue. For more information, please follow other related articles on the PHP Chinese website!