xianer0405 / xRoute

一个小型的前端路由库✈️

简述

一个小型的SPA框架.无依赖第三方的小型路由，搭配webpack作为构建工具,主要利用webpack的code spilt及异步加载功能。

路由

高级浏览器使用H5 API,低级浏览器使用hash

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

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

Router所管理的页面生命周期

一共有5个阶段:

• beforeEnter
• pageInit
• viewInit
• viewDestory
• beforeLeave

路由配置

  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/