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

Question

我正在玩新的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就像在这个例子中一样？

你认为什么是正确的方式？谢谢!

Answer 1

可以使用v-view和v-ref解析嵌套的子视图.

HTML

<div id="main">
    <div v-view="currentView" v-ref="view"></div>
</div>
<ul>
    <li><a href="#/">top</a></li>
    <li><a href="#/nest/view1">nest/view1</a></li>
    <li><a href="#/nest/view2">nest/view2</a></li>
</ul>

<script id="top" type="x-template">
    <div>top view</div>
</script>

<script id="nest" type="x-template">
    <div>
        <span>nest view</span>
        <div v-view="subview"></div>
    </div>
</script>

JavaScript的

Vue.component('top', Vue.extend({
    template: "#top",
}));

Vue.component('nest', Vue.extend({
    template: '#nest',
    components: {
        view1: Vue.extend({
            template: '<span>this is subview 1</span>',
        }),
        view2: Vue.extend({
            template: '<span>this is subview 2</span>',
        }),
    },
    data: {
        subview: "view1",
    },
}));

var main = new Vue({
    el: "#main",
    data: {
        currentView: "top",
    },
});

var router = new Router({
    '/':        function() { main.currentView = 'top' },
    '/nest/:view': function(view) {
        main.currentView = 'nest';
        main.$.view.subview = view;
    },
});
router.init();

jsfiddle:http://jsfiddle.net/koba04/WgSK9/1/

Answer 2

官方推荐的在vuejs应用程序中使用路由的方法是使用vue-router:

引用文档:

vue-router是Vue.js的官方路由器.它与Vue.js核心深度集成,使用Vue.js构建单页应用程序变得轻而易举.功能包括:

• 嵌套路由/视图映射
• 模块化,基于组件的路由器配置
• 路线参数,查询,通配符
• 查看由Vue.js过渡系统提供支持的过渡效果
• 细粒度的导航控制
• 与自动活动CSS类的链接
• HTML5历史模式或散列模式,在IE9中具有自动回退功能
• 在历史模式中返回时恢复滚动位置

精心编写的文档进一步详述Modular, component-based router configuration,包括处理嵌套路由的示例.

提供了一个router-view插座,路由配置可以指定要呈现的组件.这些组件可以包含嵌入式router-view插座,允许面向组件的嵌套路由管理.

来自文档的示例:

<div id="app">
  <router-view></router-view>
</div>

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
      '/bar': {
        // Bar will be rendered inside Foo's <router-view>
        // when /foo/bar is matched
        component: Bar
      },
      '/baz': {
        // Same for Baz, but only when /foo/baz is matched
        component: Baz
      }
    }
  }
})