vue.js-组织具有多个视图的大型单页应用程序

我正在使用新的MVVM框架-Vue.js（http://vuejs.org/）。

在简单的示例和演示中确实很棒，但是现在我正尝试创建具有多个视图的大型SPA，并且我意识到框架文档中并未描述如何实现最佳模式。

主要问题是我不知道如何处理不同路线上的视图。

例如，我使用Director（https://github.com/flatiron/director）进行路由，但是如何更改视图？

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();

我是否需要创建单独的Vue.js ViewModel，display:block / display:none就像本例一样创建它们？

您认为哪种方法正确？谢谢！