| Interactive Media Design

Working with Vue Router

Once a router instance has been created and added to a Vue application, it is time to start working with Vue Router.

Router View

Much in the same way a Vue application needs to be mounted to an HTML element to display the application, Vue Router needs an element to display the view. That element is the <router-view />. The router-viewopen in new window will display a route's component corresponding to a route's path. The <router-view /> element can be placed anywhere within the application but is typically added to the App.vue file.

<!-- src/App.vue -->
<template>
  <router-view />
</template>

While it is possible to move from view to view in a single page application by entering the path directly in the browser, it is more convenient to create links. However, when working with Vue Router, the custom element <router-link></router-link> is used instead of a tags. The router-linkopen in new window will inform Vue Router which view to display with the to attribute. Vue Router will change the URL and view without reloading the page.

<!-- src/App.vue -->
<template>
  <router-link to="/">Go to Home</router-link>
  <router-link to="/about">Go to About</router-link>
  
  <router-view />
</template>