vue.js - 用多个视图组织大型单页面应用

10 浏览
0 Comments

vue.js - 用多个视图组织大型单页面应用

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

在简单的示例和演示中，它非常好用，但现在我正在尝试创建一个具有多个视图的大型单页应用程序，我意识到最好的模式如何实现并没有在框架的文档中描述。

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

例如，我正在使用 Director (https://github.com/flatiron/director) 进行路由，但是我该如何切换视图呢？

var booksCtrl = function () {
   var booksViewModel = new Vue({
       el: '#books'
       data: { ... }
       ready: function () {
          // 隐藏前一个ViewModel并显示这个ViewModel？？
       }
   });
};
var editBookCtrl = function (id) { 
   var editBookViewModel = new Vue({
       el: '#editBook'
       data: { ... }
       ready: function () {
          // 隐藏前一个ViewModel并显示这个ViewModel？？
       }
   });
};
var routes = {
    '/books': booksCtrl,
    '/books/:id/edit': editBookCtrl
};
var router = new Router(routes);
router.init();

我需要创建单独的Vue.js ViewModel，然后像这个示例中一样使用display:block / display:none吗？

在您的意见中，什么是正确的方式？谢谢！

0