Vue Router Configuration

Following is a list of different configurations you can make for your Vue Router.

• Scroll Behavior
• Before-Each Route

Scroll Behavior

With this setting you can determine how your application behaves ones the user switches routes.

// router/index.ts
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // ...
    // your routes here
    // ...
  ],
  scrollBehavior(to, from, savedPosition) { 
    return {  
      top: 0, 
    };  
  } 
});

---

Before-Each Route

With this hook you can execute an action before every route change. This for example is useful to check if a user is authenticated for the route he accesses.

🔎 Info

The following example will not let the user enter the Login-Page if he is already logged in. Instead, he will remain on the page he is currently on.

// router/index.ts
router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  const userIsLoggedIn = false
  
  if (to.name === 'login' && userIsLoggedIn) {
    next(from);

    return;
  }
  
  next();
});