Vue Routes (Part 5)

Old School

In previous part we make a form component for "insert a new book" functionality. Since this component should be shown only when somebody wants to add a new book and pressed "Add New Book" button - we hide using v-if directive:

  <div class="row" v-if="showForm">
    <book-form v-on:book-added="onBookAdded"></book-form>
  </div>

Routing

There is a different (and more accurate) way to manage components in the application: instead of placing them straight into the markup you can load them using routes.
All you need to do for use routes is:
1. put into your code a reference to vue-router.js lib.
2. place router-view directive in place where you want your components to be loaded:

  <router-link to="/">/home</router-link>
  <router-link to="/form">/Add New Book</router-link>
  <router-view></router-view>

3. add router property to configuration of your main component:

const Home = { template: '
' }

const router = new VueRouter({ 
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/form', component: formComponent }
  ]
})
new Vue({
  el: '#app',
  router,
  data: {
    title: 'Pnei Kedem Book Club',
    books: [],
    loading:false,
    showForm:false
  },
....
....

Well currently our form cannot add a new book, but we will fix it in the next part.
Look here for running code