title: vue.js - Organize big single page application with multiple views
body: <p>I'm playing with new MVVM framework - <strong>Vue.js</strong> (<a href="http://vuejs.org/">http://vuejs.org/</a>). </p>
  
  <p>It was really nice in simple examples and demos but now I'm trying to create big SPA with multiple views and I'm realizing that the best pattern how to do it is not described in framework's docs.</p>
  
  <p>The main problem is that I don't know how to handle views on different routes.</p>
  
  <p>For example, I'm using <strong>Director</strong> (<a href="https://github.com/flatiron/director">https://github.com/flatiron/director</a>) for routing but how can I change views?</p>
  
  <pre><code>var booksCtrl = function () {
     var booksViewModel = new Vue({
         el: '#books'
         data: { ... }
         ready: function () {
            // hide previous ViewModel and display this one??
         }
     });
  };
  
  var editBookCtrl = function (id) { 
     var editBookViewModel = new Vue({
         el: '#editBook'
         data: { ... }
         ready: function () {
            // hide previous ViewModel and display this one??
         }
     });
  };
  
  var routes = {
      '/books': booksCtrl,
      '/books/:id/edit': editBookCtrl
  };
  
  var router = new Router(routes);
  router.init();
  </code></pre>
  
  <p>Do I need to create separate Vue.js ViewModels and just <code>display:block / display:none</code> them like in this example?</p>
  
  <p>What would be the right way in your opinion? Thanks!</p>