Navigation
Learn about navigation and programmatic navigation in Vue.
Changing 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.
Get hands-on with 1200+ tech skills courses.