后端路由

后端路由可以理解为服务器将浏览器请求的url解析之后映射成对应的函数,这个函数会根据资源类型的不同进行不同的操作,如果是静态资源,那么就进行文件读取,如果是动态数据,那么就会通过数据库进行一些增删查改的操作

vue-router路由

前端单页面的SPA的兴起, 不同页面对应的是不同的组件,切换页面的时候直接通过js解析页面即可

hash模式

http://localhost:8888/#/home

  1. url改变
  2. 触发事件监听
  3. 改变vue-router中的current变量
  4. 监视current变量的监视者
  5. 获取新的组件
  6. render

    vue-router工作流程

    通过location.pathname获取到当前url的路由地址;history模式下,通过pushStatereplaceState方法可以修改url地址,结合popstate方法监听url中路由的变化

    history模式

    缺点不美观
    hash模式的特点是兼容性更好,并且hash的变化会在浏览器的history中增加一条记录,可以实现浏览器的前进和后退功能;
    window.addEventListener(“hashchange”, function(){}, false)
    通过window.location.hash获取到当前url的hash;hash模式下通过hashchange方法可以监听url中hash的变化