jzhao520 / xroute Goto Github PK

  html5Mode:
  www.example.com/page1
  www.example.com/page2

  hashMode:
  www.example.com/#/page1
  www.example.com/#/page2

  const Router = new Route();

  Router
    .addRoute({
      path: 'a',
      viewBox: '',  // 容器锚点
      template: '', // 页面模板
      animate: 'slideInRight', //转场动画
      pageInit() {  // 异步加载ctrl,同时将ctrl挂载到route
        const Controller = require('modules/path1/controller');
        Router.registerCtrl('path1', new Controller(this.viewBox));
      },
      beforeEnter() {
        
      },
      beforeLeave() {

      }
    })
    .addRoute({
      path: 'b',
      viewBox: '',  
      template: '',
      animate: 'slideInRight', //转场动画 
      pageInit() { 
        const Controller = require('modules/path2/controller');
        Router.registerCtrl('path2', new Controller(this.viewBox));
      },
      beforeEnter() {

      },
      beforeLeave() {

      }
    })

  export default class PageModel {
    constructor(container) {  
      //页面容器,获取dom通过这个容器root DOM来获取
      this.container = document.querySelector(container);
    }
    setDomMap() {
      let barDom = this.container.querySelector('.barDom');
    }
    viewInit() {

    }
    viewDestory() {
      
    }
    init() {
      this.setDomMap();
      this.viewInit();
    }
  }

  slideInRight
  slideInLeft
  fadeIn
  fadeOut
  zoomIn
  zoomOut

  npm install
  npm run dev
  浏览器中打开localhost:3000/pages/register/