web-dev-qa-db-ja.com

vue.js-複数のビューを持つ大きな単一ページのアプリケーションを整理する

新しい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彼らはこの例のように？

あなたの意見で正しい方法は何ですか？ありがとう！

javascriptviewmodelsingle-page-applicationroutervue.js
32
Kosmetika

V-viewとコンポーネントを使用できる可能性がありますか？

このような。

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>
4
koba04

ネストしたくない場合は、名前付きビューを使用できます。

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

0
paibamboo