vue.js - Organize big single page application with multiple views

Nested subviews can be resolved by using v-view and 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/

The officially recommended way to use routing in vuejs applications is to use vue-router :

Quoting from the documentation :

vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:

• Nested route/view mapping
• Modular, component-based router configuration
• Route params, query, wildcards
• View transition effects powered by Vue.js' transition system
• Fine-grained navigation control
• Links with automatic active CSS classes
• HTML5 history mode or hash mode, with auto-fallback in IE9
• Restore scroll position when going back in history mode

The well-written documentation elaborates further on Modular, component-based router configuration, including examples on handling nested routes.

A router-view outlet is made available into which the route configuration can specify which component to render. These components can contain embedded router-view outlets allowing component oriented nested route management.

Example from the docs:

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

You might be able to use v-view and component?

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

like this.

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>