javascript - script - vue.js-Organiza una aplicación de una sola página con varias vistas

vue script src

Question

Estoy jugando con el nuevo framework MVVM - Vue.js ( http://vuejs.org/ ).

Fue muy agradable en ejemplos simples y demos, pero ahora estoy tratando de crear un gran SPA con múltiples vistas y me doy cuenta de que el mejor patrón de cómo hacerlo no se describe en los documentos del framework.

El principal problema es que no sé cómo manejar vistas en diferentes rutas.

Por ejemplo, estoy usando Director ( https://github.com/flatiron/director ) para el enrutamiento, pero ¿cómo puedo cambiar las vistas?

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();

¿Tengo que crear Vue.js ViewModels por separado y simplemente display:block / display:none les gusta en este ejemplo?

¿Cuál sería la forma correcta en tu opinión? ¡Gracias!

Answer 1

¿Es posible que pueda usar v-view y componente?

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

Me gusta esto.

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>

Answer 2

La forma oficialmente recomendada para usar el enrutamiento en aplicaciones vuejs es usar vue-router :

Citando de la documentación:

vue-router es el enrutador oficial de http://vuejs.org/ Se integra profundamente con el núcleo de Vue.js para facilitar la creación de aplicaciones de una sola página con Vue.js. Las características incluyen:

• Mapeo de ruta / vista anidada
• Configuración de enrutador modular basada en componentes
• Parámetros de ruta, consulta, comodines
• Ver efectos de transición con el sistema de transición de Vue.js
• Control de navegación de grano fino
• Enlaces con clases CSS activas automáticas
• Modo de historia HTML5 o modo hash, con auto-repliegue en IE9
• Restaurar la posición de desplazamiento cuando retrocede en modo historial

La documentation bien redactada profundiza en la Modular, component-based router configuration , que incluye ejemplos sobre el manejo de rutas anidadas.

Se pone a disposición un punto de router-view en el que la configuración de ruta puede especificar qué componente representar. Estos componentes pueden contener puntos de router-view integrados que permiten la administración de rutas anidadas orientadas a componentes.

Ejemplo de los documentos:

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

Answer 3

Las subvistas anidadas se pueden resolver usando v-view y 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 4

Puede usar vistas con nombre si no desea anidarlas.

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/

El violín es del documento: https://router.vuejs.org/en/essentials/named-views.html