你对SPA单页面的理解, 它的优缺点分别是什么?如何实现SPA应用呢?

// 定义 Router  
class Router {  
  constructor () {  
    this.routes = {}; // 存放路由path及callback  
    this.currentUrl = '';  
 
    // 监听路由change调用相对应的路由回调  
    window.addEventListener('load', this.refresh, false);  
    window.addEventListener('hashchange', this.refresh, false);  
  }
 
  route(path, callback){  
    this.routes[path] = callback;  
  }
 
  push(path) {  
    this.routes[path] && this.routes[path]()  
  }  
}  
  
// 使用 router  
window.miniRouter = new Router();  
miniRouter.route('/', () => console.log('page1'))  
miniRouter.route('/page2', () => console.log('page2'))  
 
miniRouter.push('/') // page1  
miniRouter.push('/page2') // page2  

// 定义 Router  
class Router {  
  constructor () {  
    this.routes = {};
    this.listerPopState()
  }  
 
  init (path) {
    history.replaceState({path: path}, null, path);  
    this.routes[path] && this.routes[path]();  
  }  
    
  route(path, callback) {  
    this.routes[path] = callback;  
  }
    
  push (path) {  
    history.pushState({path: path}, null, path);  
    this.routes[path] && this.routes[path]();  
  }
    
  listerPopState () {  
    window.addEventListener('popstate' , e => {  
      const path = e.state && e.state.path;  
      this.routers[path] && this.routers[path]()  
    })
  }
}
  
// 使用 Router  
  
window.miniRouter = new Router();  
miniRouter.route('/', ()=> console.log('page1'))  
miniRouter.route('/page2', ()=> console.log('page2'))  
 
// 跳转  
miniRouter.push('/page2')  // page2