As a simple exercise, let's create an application toolbar that can redirect us to different routes:

1. In the src/App.vue file, declare the md-app-toolbar component, as follows:

<md-app>
  <md-app-toolbar class="md-primary">
    <span class="md-title">My Title</span>
  </md-app-toolbar>
</md-app>

2. Also, remove the margin from the #app style. Now, the file should look as follows:

<template>
  <div id="app">
    <md-app>
      <md-app-toolbar class="md-primary">
        <span class="md-title">My Title</span>
      </md-app-toolbar>
    </md-app>
 <div id="nav">
 <router-link to="/">Home</router-link>|
 <router-link to="/about">About</router-link>
 </div>
 <router-view/>
 </div>
</template>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
</style>

3. Run the application if you haven't done so already. The main screen should now contain a nice blue application toolbar, as shown in the following screenshot:

4. Now, let's insert two buttons and redirect them to the Home and About routes when they're clicked:

<template>
  <div id="app">
    <md-app>
      <md-app-toolbar class="md-primary">
        <h3 class="md-title" style="flex: 1; text-align: 
            left;">Title</h3>
        <md-button to="/">Home</md-button>
        <md-button to="/about" class="md-primary">About</md-button>
      </md-app-toolbar>
    </md-app>
    <router-view/>
  </div>
</template>

Note that we also have a spacer element so that we can move the buttons to the right-hand side of the screen while leaving the Title element on the left. This pattern is widely used when developers build application toolbars.

5. Switch back to your Electron application and check out the buttons. They should switch your screens according to the rules we have just added:

At this point, you are ready to build complex applications that involve multiple screens and routing.