简单的路由

不管是借助第三方库，还是自己实现简单的路由，都需要先定义一个组件充当管理者，去动态渲染不同的页 面组件，而且为了管理方便，这里的组件可以使用实例组件来代替。

  1. var PageA = Intact.extend({template: '<div>pageA</div>'});
  2. var PageB = Intact.extend({template: '<div>pageB</div>'});
  4. var routes = {
  5.     '/page/a': PageA,
  6.     '/page/b': PageB
  7. };
  9. var App = Intact.extend({
  10.     template: '<div>{self.get("view")}</div>',
  11.     defaults: function() {
  12.         return {
  13.             view: null
  14.         }
  15.     },
  16.     load: function(Page) {
  17.         var page = new Page();
  18.         this.set('view', page);
  19.     }
  20. });
  22. var app = Intact.mount(App, document.getElementById('app'));
  24. // 这里使用hash路由
  25. window.addEventListener('hashchange', function() {
  26.     app.load(routes[location.hash.substr(1)]);
  27. });
  28. // 初始化hash
  29. location.hash = '#/page/a';

如果你熟悉template模板函数的使用，你也可以使用类组件实现