总结

路由：根据不同的 url 地址展示不同的内容或页面；

前端路由：一个路径映射一个组件；

后端路由：一个路径映射一个请求的响应函数

前端路由和后端路由区别：

映射关系不同，前端路由是一个路径映射一个组件；后端路由是一个路径映射一个处理本次请求的响应函数。
是否需要网络，前端路由不需要走网络，而后端路由需要走网络。
页面是否刷新，前端路由切换页面不会使得网页刷新，后端路由切换页面会导致网页刷新。
渲染方式，前端路由采用的是客户端渲染，后端路由是服务端渲染。

前端路由

以vue为例，一个路径映射一个组件，单页面应用一般采用该方式，这种形式的跳转不会引起页面的刷新。

const routes = [
  {
     path:'/',
     redirect:'/login'
  },
  {
    path: '/login',
    name: 'login',
    component: () => import( '../views/login')
  },
]

优点：

展示速度快，用户体验好，和后台网速没有关系，不需要每次都从服务器获取，快速展现给用户；
方便开发，实现了前后端的分离。有很多框架都带有路由功能模块。

缺点：

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存；
无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置。 主要通过URL中的hash(#号即锚点)来实现不同页面之间的切换，#号是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包含#。

后端路由

以express为例，一个路径映射一个请求的响应函数，多页面应用一般采用该方式，这种形式的跳转会引起页面的刷新。后端路由所有的URL地址都对应服务器上对应的资源。

router.get('/detail',(req,res)=>{
    const {id}=req.query
    res.send({status:1,data:list[id-1]})     // 对本次请求响应一段数据
})
router.post("/add",(req,res)=>{
   list.push(req.body)
   res.send({status:1,data:list})          // 对本次请求响应一段数据
})
router.get('/pageA',(req,res)=>{   
     require('fs').readFile('./views/a.html',(err,data)=>{
         res.end(data)             // 对本次请求响应一个页面
     })
})
router.get('/pageB',(req,res)=>{   
     require('fs').readFile('./views/b.html',(err,data)=>{
         res.end(data)             // 对本次请求响应一个页面
     })
})

优点：

分担了前端的压力，html和数据的拼接都是由服务器完成；
利于SEO。

缺点：

增大了服务器端的压力，当项目十分庞大时，加大了服务器端的压力；
网速过慢加载就慢，另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。

参考

前端路由和后端路由