vue.js -组织具有多个视图的大型单页应用程序
vue.js - Organize big single page application with multiple views
我正在玩新的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 ViewModels和display:block / display:none
他们就像在这个例子?
你认为什么是正确的方法?谢谢!
嵌套子视图可以通过使用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/
官方推荐在vue应用程序中使用路由的方式是使用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
}
}
}
})
你可能会使用v-view和component?
- http://vuejs.org/guide/application.html
。
javascriptVue.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>
如果你不想嵌套命名视图,你可以使用命名视图
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/en/essentials/named-views.html
- 在jstree中,如何将指定的节点集中到大型树上
- 如何使用javascript从主svg对象动态创建svg视图框
- 正在使用$location.path(.)路由ng视图
- angular.js没有'无法在PhoneGap中处理视图标记
- 如何包含特定于每个视图angularjs的javascript文件
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- Ajax Live搜索发布到Laravel视图
- backbone.js无法渲染视图
- 根据某些条件在视图之间切换
- ng视图外的链接重定向到ng视图内的页面
- 以块形式呈现大型HTML表
- 如何在Jquery中发布后将值从视图返回到控制器
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 使用Scala Play Framework视图中的键检索映射值
- FF视图源|脚本高亮显示为红色
- 用于大型静态网站的JavaScript树视图
- 在构建大型网站的jquery绑定时,在不同文件中分离视图
- 使用SPServices查询大型列表,避免列表视图阈值.特性
- vue.js -组织具有多个视图的大型单页应用程序