谈谈你对 SPA 的理解

什么是 SPA ？

SPA (single-page-application), 即单页面应用， spa 可以根据需要动态装载适当的资源并添加到页面里面， 可以减少重复渲染， 提高效率。就像一个杯子，早上可装牛奶，下午可以装茶水， 晚上可以装白开水， 变的始终是杯子里面的内容， 而那个杯子永远不变

SPA 和 MPA（多页面应用）

单页面应用的优点

• 具有桌面应用的即时性、 网站的可移植性和可访问性
• 用户体验良好、速度快， 节约计算资源
• 良好的前后端分离， 分工明确

缺点

• SEO 搜索引擎优化较差， 不利于搜索引擎的获取
• 首次渲染速度相对较慢

哈希模式 hash

// 定义 Router  
class Router {  
    constructor () {  
        this.routes = {}; // 存放路由path及callback  
        this.currentUrl = '';  
          
        // 监听路由change调用相对应的路由回调  
        window.addEventListener('load', this.refresh, false);  // 给全局 window 添加 load 事件句柄
        window.addEventListener('hashchange', this.refresh, false);  
    }  
      
    route(path, callback){  
        this.routes[path] = callback;  
    }  
      
    push(path) {  
        this.routes[path] && this.routes[path]()  // this.router[path] 存在 即为 true 的话， 就执行回调函数
    }  
}  
  
// 使用 router  
window.miniRouter = new Router();  
miniRouter.route('/', () => console.log('page1'))   // 定义页面路由， '/' 路径绑定回调函数
miniRouter.route('/page2', () => console.log('page2'))  
  
miniRouter.push('/') // page1  调用 '/' 路径所绑定的回调函数，渲染页面
miniRouter.push('/page2') // page2

历史模式 history

// 定义 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 

标签：page2,谈谈,理解,path,routes,SPA,miniRouter,Router,页面
来源： https://www.cnblogs.com/white-boy/p/vue1.html