scroll to top router link vue 1

scroll to top router link vue

export default new Router({
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ],
  mode: 'history'
});

Here is what the above code is Doing:
1. We’re importing the Vue Router library.
2. We’re importing the Home component.
3. We’re creating a new Router object.
4. We’re setting the scrollBehavior to return the user to the top of the page when they navigate to a new route.
5. We’re setting the routes to an array of objects.
6. We’re setting the path to ‘/’ which is the root of the application.
7. We’re setting the name to ‘Home’.
8. We’re setting the component to the Home component.
9. We’re setting the mode to ‘history’.

Now that we have our router, we need to tell Vue to use it.

Open up main.js and add the following code:

Similar Posts