Navigation

Changing the current routeThe "current route" refers to the specific page or URL path that the user is currently viewing or navigating within a web application. is achieved in two ways: via the <router-link> component and programmatically.

Links

While we could just use a standard <a> tag, the <router-link> component that Vue Router provides has several advantages:

• It automatically applies a CSS class of “active” when the URL matches the current route (the class name can be configured by setting the router’s linkActiveClass option).

• It takes into account whether the router is configured for hash mode or HTML5 history mode and will render the correct URL format automatically. When in history mode, it prevents the browser from reloading the page by preventing the default click action.

• It takes into account the base setting, if configured, and builds the URL accordingly.

The component is used in the same way we use an <a> tag, only the URL is passed in via the to prop.