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视图模型，然后像此示例中一样使用display:block / display:none进行显示/隐藏吗？

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

- Kosmetika

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/

- koba04

---

非常感谢！这个例子非常有帮助！ - Kosmetika

Answer 2

在Vue.js应用程序中使用路由的官方推荐方式是使用vue-router：

引用自文档：

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

• 嵌套路由/视图映射
• 模块化、基于组件的路由器配置
• 路由参数、查询、通配符
• 由Vue.js过渡系统驱动的视图过渡效果
• 细粒度的导航控制
• 具有自动活动CSS类的链接
• HTML5历史模式或哈希模式，在IE9中自动回退
• 在历史模式下返回时恢复滚动位置

写得很好的文档进一步阐述了模块化、基于组件的路由器配置，包括处理嵌套路由的示例。

一个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
      }
    }
  }
})

- lorefnon

---

我认为这已经过时了。subRoutes现在是一个数组children: https://router.vuejs.org/zh/guide/essentials/nested-routes.html - escapedcat

Answer 3

你也许可以使用v-view和component？

• http://vuejs.org/guide/application.html

就像这样。

javascript

Vue.component('top', Vue.extend({ 
    template: "<div>top view</div>", 
})); 

Vue.component('other', Vue.extend({ 
    template: "<div>other view</div>", 
})); 

var main = new Vue({ 
    el: "#main", 
    data: { 
        currentView: "top", 
    }, 
}); 
var router = new Router({ 
    '/':        function() { main.currentView = 'top' }, 
    '/other':   function() { main.currentView = 'other' }, 
}); 
router.init(); 

html

<div id="main">
    <div v-view="currentView"></div>
</div>

- koba04

---

顺便问一下，嵌套子视图怎么处理？ - Kosmetika

Answer 4

如果您不想嵌套视图，可以使用命名视图。

HTML

  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>

JavaScript

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
      path: '/',
      // a single route can define multiple named components
      // which will be rendered into <router-view>s with corresponding names.
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/other',
      components: {
        default: Baz,
        a: Bar,
        b: Foo
      }
    }
  ]
})

jsfiddle: https://jsfiddle.net/posva/6du90epg/

这个示例来自于文档: https://router.vuejs.org/zh/guide/essentials/named-views.html

- paibamboo